Zeki Can - WordPress

  CSS, HTML

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

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.

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

  Benzer Yazılar

  Yorumlar

  Kategoriler

  Arama Yap

  Son yorumlar