Zeki Can - WordPress

  CSS, HTML

Buton Yapımı Buton Tasarımı CSS ile Renkli Butonlar

  CSS, HTML    13 Ocak 2019
Yorum Yok

HTML ve CSS ile harika butonlar nasıl yapılıyor diye merak ediyordum. Bu butonlarda geçişli renk kullanılıyor. Buna Gradient tasarım deniyor. Bu şekilde aratırsanız yabancı kaynaklardan daha geniş kullanımları görebilirsiniz.

Öncelikle bu tasarımı style.css dosyamıza eklememiz ve html kodları ile sayfamız da stil olarak belirlememiz gerekiyor.

Style.CSS Dosyasına Nasıl Ulaşılır ?

Bu konuya daha önce değindiğimden dolayı başka bir yazıma yönlendireceğim sizi. WordPress Style.css dosyası nerede ? adlı konumda bu dosyayı resimli olarak nasıl ulaşacağınızı ayrıntılı olarak ele aldım.

Style.Css dosyamızı açalım ve altta yer alan kod betiğini stil dosyamızda tanımlayalım.

/* CSS ile Renkli Harika Butonlar Oluşturma Başlangıç ZekiCan.Net */
.gradient-button {
    margin: 10px;
    font-family: "Arial Black", Gadget, sans-serif;
    font-size: 20px;
    padding: 15px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: #FFF;
    box-shadow: 0 0 20px #eee;
    border-radius: 10px;
    width: 200px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    cursor: pointer;
    display: inline-block;
    border-radius: 25px;
}
.gradient-button:hover{
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    margin: 8px 10px 12px;
}
.gradient-button-1 {background-image: linear-gradient(to right, #DD5E89 0%, #F7BB97 51%, #DD5E89 100%)}
.gradient-button-1:hover { background-position: right center; }

.gradient-button-2 {background-image: linear-gradient(to right, #2BC0E4 0%, #EAECC6 51%, #2BC0E4 100%)}
.gradient-button-2:hover { background-position: right center; }

.gradient-button-3 {background-image: linear-gradient(to right, #7474BF 0%, #348AC7 51%, #7474BF 100%)}
.gradient-button-3:hover { background-position: right center; }

.gradient-button-4 {background-image: linear-gradient(to right, #00d2ff 0%, #3a7bd5 51%, #00d2ff 100%)}
.gradient-button-4:hover { background-position: right center; }
/* CSS ile Renkli Harika Butonlar Oluşturma Bitiş ZekiCan.Net */

Bu kod betiğini stil doyamıza tanımladıktan sonra bu buton tasarımlarını kullanmak istediğimiz bölüme HTML Kodları ile yerleştirmemiz gerekiyor.

Kullanmak istediğiniz yere alttaki kodları yapıştırın ve kendinize göre düzenleyin.

<a class="gradient-button gradient-button-1">Buton 1</a><br />
<a class="gradient-button gradient-button-2">Buton 2</a><br />
<a class="gradient-button gradient-button-3">Buton 3</a><br />
<a class="gradient-button gradient-button-4">Buton 4 ZekiCan.Net</a>

Buton 1 dediğim bölüm buton isminizdir. Buraya Butonun içerisinde ne yazmasını istiyorsanız onu yazın. İndir butonu olarak kullanmak isterseniz İndir yazın.

Buton Tasarımı
Buton Tasarımı Görünümü

Nasıl Gözüktüğünü Merak Edenler İçin

Ücretsiz Buton Tasarımı ve Yapımı
145 okunma

Etiketler : , , , , , , , , , ,

  Benzer Yazılar


  Yorumlar

Bir Cevap Yazın

E-posta hesabınız yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Bu yazıya henüz yorum yapılmamıştır, yazı hakkındaki düşüncelerinizi paylaşmaktan çekinmeyin.

  Arama Yap

  Arşivler