HTML buton oluşturma ve sitenize animasyonlu buton yapmayı anlatacağız. Sitenizde şık ve güzel buton tasarımları oluşturabilirsiniz. Html buton yapma, butona link verme adımlarını da anlatacağız. Blogger tabanlı sitenizde css ve basit html kodları kullanarak şık buton tasarımları yapın.
Html Buton Yapmak
Html buton yapmak için aşağıdaki örnek gibi kod komutları ile oluşturulur.
<button>Buton</button>{codeBox}
Html Buton Şekil Verme
Butonlara css ile şekil vermek için iki yapı kullanılır ilki buton yapısında css kullanmak ikincisi ise kaynak kodları ile css ile şekillendirmektir.
İlk yapı buton kurulumunda şekil vermek.
<button style="background-color:tomato;color:white;width:70px;">Buton</button>{codeBox}
İkinci yapı ise css dosyalarını butonu şekil vermek. Burada yapılan buton oluşturuldu daha sonra <style> ve </style> arasındaki css komutları ile şekil verildi.
<button class="button">Buton</button>
<style>
.button {
background-color: #01b6bf;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
</style>{codeBox}
HTML Buton Link Verme
Oluşturulan buton iki şekilde link verebileceğiniz gibi farklı yollarda olabilir. Şimdi ise basit link verme işlemini yapmaya geçelim.
Aşağıdaki kod içerisinde butonu oluştururken Buton-linki ile butona link verdik.
<button onclick="window.location.href = 'Buton-linki';">Buton</button>{codeBox}
Aşağıdaki gibi de link verilebilir. Kod <a> ve </a> etiketileri arasına eklenerek yapıldı.
<a href="Buton-linki"><button class="ripple">Buton</button></a>{codeBox}
Butonu yeni sayfa açması ve seo için _blank etiketi ve seo için nofollow, dofollow, noopener ve noreferrer etiketlerini de kullanabilirsiniz.
Örnek kullanımı aşağıdaki gibi olacaktır.
<a href="Buton-linki" rel="nofollow" target="_blank">
<button>Buton</button>
</a>{codeBox}
Animasyonlu Buton Yapmak
Blogunuz için animasyonlu buton yapmak için ilk önce css kodları </style> veya ]]></b:skin> etiketinden önce ekleyiniz.
.ripple {
background-position: center;
transition: background 0.8s;
}
.ripple:hover {
background: #47a7f5 radial-gradient(circle, transparent 1%, #47a7f5 1%) center/15000%;
}
.ripple:active {
background-color: #6eb9f7;
background-size: 100%;
transition: background 0s;
}
/* Button style */
button {
border: none;
border-radius: 2px;
padding: 12px 18px;
font-size: 16px;
text-transform: uppercase;
cursor: pointer;
color: white;
background-color: #2196f3;
box-shadow: 0 0 4px #999;
outline: none;
}{codeBox}
Siteye css kodlarını sitenize ekledikten sonra butonları kullanabilirsiniz. Animasyonlu buton kullanımı için aşağıdaki gibi butonlar oluşturun.
<button class="ripple">Buton</button>{codeBox}