CSS ile Basit Buton Örnekleri
CSS ile birbirinden basit ve gelişmiş buton örneklerini yapabilirsiniz. Burada birkaç örneği sizler ile bir araya getirelim.
Basit CSS buton
.button { display: inline-block; padding: 10px 20px; font-size: 16px; cursor: pointer; text-align: center; text-decoration: none; outline: none; color: #fff; background-color: #4CAF50; border: none; border-radius: 15px; box-shadow: 0 9px #999; } .button:hover { background-color: #3e8e41 } .button:active { background-color: #3e8e41; box-shadow: 0 5px #666; transform: translateY(4px); }
Aşağıdaki CSS koduyla, düğmelerin arka plan rengini mavi yapabilir, yazı rengini beyaz yapabilir ve düğmelere hover yaptığımızda arka plan renginin kırmızı olmasını sağlayabiliriz:
button { background-color: blue; color: white; } button:hover { background-color: red; }
Aşağıda daha detaylı birkaç örnek düğme kodu bulabilirsiniz:
Düz, düzgün köşeli CSS Buton Yapımı
button { background-color: blue; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; }
CSS Transparan düğme
button { background-color: transparent; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; }