Efektli CSS Buton Tasarımı
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 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.
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.
- Yayın Süresi : 2611 Gün
- Konu Sayısı : 277 Bilim Konuları : 118 Teknoloji Konuları : 42 Web-Tasarım Konuları : 42 İlginçler Konuları : 63 Gezi Konuları : 12 En Popüler : Sonsuz İşlemleri 240856 Kere En Çok Yorum Alan : Logaritma Nedir, Ne İşe Yarar, Gerçek Hayatta Nerelerde Kullanılır? 19 Kere En Çok Değerlendirilen : Sonsuz İşlemleri 142 Kere
Satrançta Piyonun Geçerken Alması Kuralı (En Passant)
En passant kuralı nedir, ne zaman uygulanır...
Işık Hızında Bağıl Hız
Işık hızında giden cisimler için bağıl hız hesaplamaları...
Newton Karantinada Neler Yaptı?
Newtonun karantina günleri ve icatları...
Çamaşır Suyu Nedir? Nasıl Temizler?
Çamaşır suyunun yapısı, kullanım alanları ve dikkat edilmesi gerekenler...
Dünyanın Yaşını Nasıl Biliyoruz?
Dünyanın yaşını hesaplama yöntemleri...
Salgın Hastalık Dereceleri : Pandemik, Epidemik, Endemik, Sporadik
Pandemik, Epidemik, Endemik, Sporadik Nedir?
Kahve Günlükleri : Kahve Çekirdeği Kavurma Dereceleri
Hafif, orta, orta-koyu, koyu kavrulmuş kahve çekirdeklerinin özellikleri ve farkları...
Kahve Günlükleri : Kahve Demleme Yöntemleri
Kahve demleme yöntemleri ve farkları...
Kahve Günlükleri : Kahve Çeşitleri ve Ölçüleri
Popüler kahve çeşitleri ve ölçüleri...
Kahve Günlükleri : Arabica ve Robusta
Arabica ve Robusta kahve çekirdekleri ve farkları...
Sayıların Sınıflandırılması (Matematik)
Matematikte sayıların sınıflandırılması : Kompleks, Sanal, Gerçek, Doğal, Rasyonel, İrrasyonel...
Websiteniz İçin Bedava Güvenlik Sertifikası (SSL Sertifikası)
Tamamen bedava güvenlik sertifikası nasıl elde edilir, nasıl yüklenir?
Wi-Fi Şifresini Görme (Windows 7 - 10)
Programsız, kodsuz wifi şifresini görme yöntemi.
Kolay Ezberleme Yöntemi : Anımsatıcılar
Kolay ezberleme yöntemlerinden anımsatıcılar : Mnemotekni
Tarayıcılarda Ön Bellek İşlemleri (Normal Yükleme - Tam Yükleme - Ön Belleği Boşaltma)
Tarayıcılarda normal yükleme ve tam yükleme ne demektir, nasıl yapılır?
Takip, Reaksiyon, Fren ve Durma Mesafesi
Reaksiyon, fren, durma ve takip mesafesi nasıl hesaplanır, bilimsel detaylar.
Bilgisayarda Müzik Nasıl Yapılır?
Sadece bilgisayar programları kullanarak gerçekçi müzik nasıl oluşturulur?
Beden Kitle İndeksi Hesaplama ve Değerlendirme
Bu uygulama ile Vücut Kitle İndeksinizi hesaplayabilir ve sonucu değerlendirebilirsiniz.
Hidrojen Peroksit (H2O2) ve Özellikleri
Hidrojen peroksit nedir, sağlık açısından ne gibi etkileri vardır?
Photoshop'ta Ortalama İşlemleri
Photoshop'ta ortalama işlemleri nasıl yapılır?
Bu kısımdan sitemizdeki gelişmelerden haberdar olabilirsiniz.
- Abonelik Sistemi kaldırıldı. 11.03.2020
- Arama Motoru Google Özel Arama olarak değiştirildi. 15.10.2019
- Yıllık sunucu bakımı tamamlandı. 04.10.2019
- Konulara kaynaklar eklendi. 10.07.2019
- SSL sertifikası eklendi. 31.05.2019
Gitar çalmayı öğrenmek, yeteneğinizi geliştirmek, popüler tab ve akorlar için gitaregitim.net sitesini ziyaret etmeyi unutmayın.