Sihirli Fasulyeler

Efektli CSS Buton Tasarımı

Web-Tasarım 6406 16.01.18 15.10.18 0

Butonlar her websitesinde bulunan elemanlardır. Buton tasarımlarında farklı efekt ve animasyonlar kullanarak hem sayfada bir görevi olan hem de websitelerimizin görselliğini artıran butonlar tasarlayabilmekteyiz. Bu makalemde farklı bir efekte sahip ve tasarımı standart butonlardan biraz daha zahmetli olan bir buton tasarımı yapacağız. Eğer bu tasarımı anlayabilirsek istediğimiz şekil ve efekte sahip butonları rahatlıkla tasarlayabiliriz.

Tasarlayacağımız butonu aşağıda test edebilir, kaynak kodları buradan bilgisayarınıza indirebilirsiniz.

Buton

Buton tasarımında genellikle HTML elemanlarından link elemanı (a) kullanılmaktadır. Eğer kullanıcıyı başka sayfalara yönlendirmek dışında bir butona ihtiyacımız varsa (örneğin websitelerdeki arama butonu gibi) label elemanı gibi farklı elemanlar da kullanabiliriz.

Öncelikle HTML yapımızı oluşturalım.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS - Buton</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
<a href="#" class="buton">Buton
	<span  class="katmanlar katman1"></span>
	<span  class="katmanlar katman2"></span>
	<span  class="katmanlar katman3"></span>
	<span  class="katmanlar katman4"></span>
	<span  class="katmanlar katman5"></span>
</a>
</body>
</html>

HTML yapımızda butonumuzun üzerine gelindiğinde farklı şekilde hareket edecek 5 tane alt katman ekledik. Bu katmanlar efektimizi oluşturacak elemanlarımız olacak. Dikkat ederseniz katmanlarımızı <div> ile değil <span> yapıları ile oluşturduk. Bunun nedeni HTML kurallarıdır. <div> katmanları <a> elemanın alt elemanı olamazken <span> katmanları olabilir. Sıra geldi CSS işlemlerine, ilk olarak buton sınıfı için işlemlerimizi yapalım.

.buton{
    font-size: 22px;
    color:#fff;
    background: #1e5799; 
    background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); 
    background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
    background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); 
    border:3px solid #fff;
    text-decoration: none;
    padding: 25px 45px;
    font-family: "Arial",serif;
    border-radius: 0px;
    transition: all .1s linear;
    position: relative;
    z-index: 1;
    overflow:hidden;
    border-radius: 10px;
    box-shadow: 2px 2px 2px 2px #333;
    font-weight: bold;
    transition: all .6s ease;
}

CSS işlemleri sonucunda butonumuzun görüntüsü aşağıdaki gibi oldu.

Buton

Sıra geldi link elemanımızın içinde yer alan ve efekti oluşturacak elemanlarımız için CSS işlemlerini yapmaya. Öncelikle bütün alt elemanlara ait "katmanlar" adındaki sınıfı kullanarak ortak komutlarımızı yazalım.

.katmanlar{
    position: absolute;
    background: #ffaf4b;
    background: -moz-linear-gradient(top, #ffaf4b 0%, #ff920a 100%);
    background: -webkit-linear-gradient(top, #ffaf4b 0%,#ff920a 100%); 
    background: linear-gradient(to bottom, #ffaf4b 0%,#ff920a 100%); 
    left:0;
    top: 0;
    z-index: -1;
    transform:translateY(-100%);
    transition: all .3s ease;
    width: 25%;
    height: 100%;
}

Her alt elemanı için yüzde 25'lik bir genişlik değeri tanımladık. 5 alt elemanımız olduğu için toplam genişlik, link elemanını fazlasıyla dolduracaktır. Genişliği %20 yapmamızın nedeni efekt sırasında bazı boşlukların oluşmasını engellemektir. Yapmamız gereken tek şey alt elemanları yan yana dizmek ve kullanıcı butonun üstüne geldiğinde alt elemanların aralıklarla hareket etmesini sağlamak olacaktır. Bu yüzden efekt başlangıcını belirleyecek bir gecikme süresini de alt elemanlarımız için tanımlayalım.

.katman1{
    left:0;
    transition-delay: 0s;
}
.katman2{
    left:20%;
    transition-delay: .1s;
}
.katman3{
    left:40%;
    transition-delay: .2s;
}
.katman4{
    left:60%;
    transition-delay: .3s;
}
.katman5{
    left:80%;
    transition-delay: .4s;
}

Son olarak, link elemanımızın üzerine gelindiğinde bütün elemanlarımız için daha önceden -100% olarak belirlediğimiz translateY değerini sıfır yaparak alt elemanları aşamalı şekilde kullanıcıya gösterelim.

.buton:hover .katmanlar{
    transform:translateY(0%);
}

Böylece alt elemanlar kullanarak farklı bir buton tasarımı yapmış olduk. Bu yöntemle birbirinden farklı görünen pek çok gelişmiş buton tasarımı yapabiliriz.

Buton

Konuyu geliştirmemize yardımcı ol, konuyu değerlendir.

İlk Sen Değerlendir

Toplam Değerlendirme : 0

Bu konuyu paylaş

Yorum yaz, soru sor, geliştirme öner

İlk Yorumu Sen Yap

Sitene Destek Ver