CSS ile 3D Buton

Vatanay Özbeyli CSS3

css3DbuttonCSS3 ile gelen perspektif tanımları sayesinde çok boyutlu tasarımları web tarafına aktarmak fazlasıyla kolaylaştı.

Biz de CSS’in perspective tanımı ile alakalı konuşmaya devam ediyoruz. Bugün sizlerle birlikte, üzerine gelindiğinde arkaya doğru yaslanan bir buton tasarımı hazırlayacağız.

ÖRNEĞİ GÖRÜNTÜLE

CSS ile 3 boyutlu buton nasıl yapılır?

Daha önceki makalelerimizde de bu konuya değinmiştik. İsterseniz “CSS ile Basılabilen 3 Boyutlu Buttonlar” başlıklı yazımıza da göz atabilirsiniz.

Bu aşamada yapacağımız işlem gayet basit. İlk olarak temel haliyle bir buton oluşturacağız. Sonrasında bu butonun çerçevesine perspective tanımı yapacağız. Böylece işin içersine 3 boyut desteği girecek. Daha sonra da butona vereceğimiz rotate tanımlamalarıyla normal ve hover kontrolü yapacağız.

Hazırsanız başlayalım.

HTML Kodları

Bir çerçeve, içerisine de buton oluşturalım.

<p class="ucboyutlu">
  <a href="#">3 Boyutlu Button</a>
</p>

Bu kadar. Şimdi bu butonu stilize edelim.

CSS Kodları

İlk olarak çerçevemizi yani paragraf elemanımızı tasarlayalım.

.ucboyutlu{
    perspective:1200px;
    display:inline-block;
    font:400 1em Tahoma;
}

Şimdi de klasik yapıdaki butonumuzu stilize edelim.

.ucboyutlu a{
    padding:.8em 2em;
    color:white;
    transition:all 0.4s;
    display:block;
    background:#1abc9c;
    transform-style:preserve-3d;
    text-decoration:none;
    background: linear-gradient(#16a085, #1abc9c);
}

Yeşil tonlaması güzel gözükecektir. Sırada :after öğesi kontrolü var. Rotate işlemi için renk tanımlayalım. 

.ucboyutlu a:after{
    width:100%;
    height:40%;
    left:0;
    top:99%;
    background:#0c816a;
    transform-origin: 0% 0%;
    transform:rotateX(-90deg);
    content:"";
    position:absolute;
    z-index:-1;
    transition:all 04.s;
}

Ve üzerine gelindiğinde X ekseninde 35 derece çevirelim.

.ucboyutlu a:hover{
    transform:rotateX(35deg);   
}

Bitti.

Kapanış

Bu tip küçük tasarım makalelerinde amacımız sanıldığı gibi freeby paylaşmak değil, CSS3’ün temelini oluşturacak 3 boyut algısını sizlere aktarabilmektir. Umarız minik örneklendirmelerimiz sizlere faydalı olmaktadır.

İyi çalışmalar.