Web siteleriniz için kolaylıkla özelleştirip kullanabileceğiniz buton örneği. Sazzad Hossain tarafından hazırlanmış olan bu butonlar 3 farklı renkten oluşuyor. Dilerseniz farklı farklı renklerden oluşan bir menü örneği olarak ta kullanabilirsiniz. Butonlar tıklandığı zaman içe doğru batmasada mouse hareketleri sonucu renk değişimleri sırasında içe batıyormuş gibi görülebiliyor.
Kullanım
- Head etiketleri arasına eklemeni gereken bölüm.
Css :
.hot-container p { margin-top: 10px; } a { text-decoration: none; margin: 0 10px; } .hot-container { min-height: 100px; margin-top: 100px; width: 100%; text-align: center; } a.btn { display: inline-block; color: #666; background-color: #eee; text-transform: uppercase; letter-spacing: 2px; font-size: 12px; padding: 10px 30px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid rgba(0,0,0,0.3); border-bottom-width: 3px; } a.btn:hover { background-color: #e3e3e3; border-color: rgba(0,0,0,0.5); } a.btn:active { background-color: #CCC; border-color: rgba(0,0,0,0.9); } /* blue button */ a.btn.btn-blue { background-color: #699DB6; border-color: rgba(0,0,0,0.3); text-shadow: 0 1px 0 rgba(0,0,0,0.5); color: #FFF; } a.btn.btn-blue:hover { background-color: #4F87A2; border-color: rgba(0,0,0,0.5); } a.btn.btn-blue:active { background-color: #3C677B; border-color: rgba(0,0,0,0.9); } /* red button */ a.btn.btn-red { background-color: #E48681; border-color: rgba(0,0,0,0.3); text-shadow: 0 1px 0 rgba(0,0,0,0.5); color: #FFF; } a.btn.btn-red:hover { background-color: #DA4F49; border-color: rgba(0,0,0,0.5); } a.btn.btn-red:active { background-color: #B32C24; border-color: rgba(0,0,0,0.9); }
- Body etiketleri arasına eklemeniz gereken bölüm.
Html :
<div class="hot-container"> <p> <a href="#" class="btn">This is a button</a> <a href="#" class="btn btn-blue">This is a button</a> </p> <p> <a href="#" class="btn btn-red">This is a button</a> <a href="#" class="btn btn-green">This is a button</a> </p> </div>