ÇAM
Nasıl Yapılır?
İlk olarak HTML yapısı için Basitçe bir <button> etiketi kullanarak butonu tanımlarız. Daha sonra butonun hoş gözükmesini sağlamak ve işlevsel bir hale getirmek için CSS'te bazı temel ayarlar yaparız. 1) Arkaplan ve Metin Rengi (background-color, color): Butonun rengini belirler. Genellikle koyu bir renk seçilirse, metin rengi açık (beyaz) seçilir. 2) İç Boşluk (padding): Buton metni ile kenarları arasına boşluk koyarak butonun boyutunu ayarlarız ve daha kolay tıklanabilir hale getiririz. 3) Köşe Yuvarlaklığı (border-radius): Butonun köşelerini yumuşatır, modern bir görünüm verir. 4) Fare Üzerine Gelme Efekti (:hover): Butonun tıklanabilir olduğunu belirtmenin en basit yolu, fare üzerine geldiğinde rengini değiştirmektir. Bu örnekte, temel buton tasarımının renk, boyut ve şekil gibi özelliklerini göstermektedir.
<style>
body {
background-color: #f0f4f8;
}
.btn-1{
background-color: rgb(0, 101, 252);
color: white;
padding: 10px;
margin: 5px;
border-radius: 25px;
width: 100px;
}
.btn-2{
background-color: rgb(0, 0, 0);
color: white;
padding: 10px;
border-radius: 0 10px;
width: 100px;
transition: transform .3s;
}
.btn-2:hover{
transform: translateY(-10px);
}
.btn-3{
background-color: rgb(255, 81, 0);
color: black;
padding: 10px;
border-radius: 10px 10px 0 0px;
width: 100px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.btn-3:hover{
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.9);
}
.btn-4{
background-color: #ffe600;
color: black;
padding: 10px;
border-radius: 12px;
width: 100px;
box-shadow: 7px 7px 0 0 #ffe600;
}
.btn-4:hover{
box-shadow: 15px 5px 15px 0 #ffe600;
}
.btn-4:active {
top: 7px;
box-shadow: 0 0 0 0 #5f3dc4; /* Gölgeyi kaldır */
transition: all 0.05s linear;
}
</style>
<body>
<div class="container row my-5">
<button type="button" class="btn-1 col-4">Kaydet</button>
<button type="button" class="btn-2 col-4">Kaydet</button>
<button type="button" class="btn-3 col-4">Kaydet</button>
<button type="button" class="btn-4 col-4">Kaydet</button>
</div>
</body>
.row ve .col sınıfları içinde kullanarak ızgara düzeni oluşturabilirsin.
Mobilde otomatik olarak alt alta dizilirler.