Html ve Css ile 3d Button Tasarımı
Html ve Css kodları kullanarak üzerine gelince renk değiştiren ve tıklanınca hareketlenen 3d buton tasarımı anlatacağız. Bu tasarım da her hangi bir java script kodu bulunmuyor. Kodlar Canlı örneğin altında olacak.
.bas{ background-color: #0068FF; width:370px; height:35px; text-align:center; color:white; font-size:30px; font-weight:bold; padding-top:5px; }.D { width:330px; height:320px; padding:15px; float:left; border:solid 5px; border-color:#0068FF; } .D1 { height: 80px; float:left; }.D2 { height: 80px; float:left; } .D3 { height: 80px; float:left; }.D4 { height: 80px; float:left; } .button { display: inline-block; width: 80px; height: 40px; float:left; margin:15px; font-size: 25px; cursor: pointer; text-align:center; text-decoration: none; outline: none; color: #fff; background-color: #0068FF; border: none; border-radius: 100px; box-shadow: 0 7px #fff; } .button:hover { background-color: #fff; color:#0068FF; height: 50px; box-shadow: 0 13px 5px #0068FF; }.button:active { background-color: #fff; box-shadow: 0 5px 5px #0068FF; color: #0068FF; transform: translateY(15px); }
<div class="bas"> 3D B u t o n </div>
<div class="D">
<div class="D1">
<input class="button" type="button" value="1"></input>
<input class="button" type="button" value="2"></input>
<input class="button" type="button" value="3"></input>
</div>
<div class="D2">
<input class="button" type="button" value="4"></input>
<input class="button" type="button" value="5"></input>
<input class="button" type="button" value="6"></input>
</div>
<div class="D3">
<input class="button" type="button" value="7"></input>
<input class="button" type="button" value="8"></input>
<input class="button" type="button" value="9"></input>
</div>
<div class="D4">
<input class="button" style="width:300px" type="button" value="0"></input>
</div>
</div>
إرسال تعليق
Yazı Hakkındaki Düşünceleriniz...