CSS İLE BUTTON TASARIMI

Düğmeler, herhangi bir web sayfasının en önemli bileşenlerinden biridir. Hepimizin bildiği gibi, düğmeler sayfalarda önemli öğelerdir ve bunları, indirme , yükleme , sayfalara giriş / çıkış , gönderme vb. Gibi yaygın eylemleri görsel olarak güzelleştirmek için kullanırız . İyi bir buton tasarımı kullanılabilirliği artırır.

Varsayılan olarak HTML düğmeleri çok sıkıcı görünüyorlar ve websiteler de uyumsuz tasarım bozukluklarına sebep oluyorlar. Bu nedenle , ziyaretçilerinize daha güzel görünümlü buttonlar için CSS kullanarak düğmelerinizi style vermemiz gerekir.

Web tasarımcılarının artık güzel görünümlü düğmeler oluşturmak için Photoshop, gimp proğramlarına güvenmesi gerekmiyor. CSS3 ile arka plandaki degradelerden, gölgeler ve parlak efektlere kadar her şeyi değiştirebilirsiniz.

CSS ile güzel görünümlü düğmeler oluşturma zor değildir; Ancak CSS bilginiz sınırlıysa zor gelebilir. CSS kullanarak düğmelerin nasıl style verileceğini öğrenelim.

Button oluşturma HTML etiketleri

---

Bir düğme elde etmenin birçok yolu vardır:

<button>Tıkla!</button>

<input type="submit" value="Tıkla!">

<a href="#">Tıkla!</a>

Temel Button Style Verme

---

HTML:

<button>Default Button</button>

<a href="#" class="button">Link Button</a>

<button class="button">Button</button>

<input type="button" class="button" value="Input Button">

CSS:

.button{

    background-color: #e67e22;

    border: none;

    color: white;

    padding: 15px 32px;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    font-size: 16px;

    margin: 4px 2px;

    cursor: pointer;
}

ÇIKTI:

Buttona Renk Verme

---

Bir düğmenin arka plan rengini değiştirmek için background-color özelliği kullanın :

CSS:

.button2 {background-color:#008CBA} /* Blue*/

.button3 {background-color:#bdc3c7; 

           color: black;} /*Silver*/

.button4 {background-color:#16a085} /*Green sea*/ 

.button5 {background-color:#555555} /*Black*/

HTML:

<button class="button">Carrot</button>

<button class="button button2">Blue</button>

<button class="button button3">Green sea</button>

<button class="button button4">Gray</button>

<button class="button button5">Black</button>

ÇIKTI:

Button Boyutunu Ayarlama

---

Bir düğmenin yazı tipi boyutunu değiştirmek için font-size özelliğini kullanın:

CSS:

.button1 {font-size: 12px}

.button2 {font-size: 16px}

.button3 {font-size: 20px}

.button4 {font-size: 24px}

.button5 {font-size: 28px}

ÇIKTI:

Bir düğmenin dolgularını değiştirmek için padding özelliği kullanın:

CSS:

.button1 {padding: 10px 24px;}

.button2 {padding: 12px 32px;}

.button3 {padding: 14px 46px;}

.button4 {padding: 30px 15px;}

.button5 {padding: 20px;}

ÇIKTI:

Yuvarlatılmış Button'lar

---

Düğmeye yuvarlatılmış köşeler eklemek için border-radius özelliğini kullanın:

CSS:

.button1 {border-radius: 2px}

.button2 {border-radius: 4px}

.button3 {border-radius: 10px}

.button4 {border-radius: 14px}

.button5 {border-radius: 30px}

.button6 {border-radius: 50%}<

ÇIKTI:

Buttonlara Renkli Kenarlık Verme

---

Düğmeye renkli kenarlık eklemek için Borderözelliği kullanın:

CSS:

.button1 {

    background-color: white;

    color: black;

    border: 2px solid blue
}

ÇIKTI:

Hover Etkili Buttonlar

---

Mouse hareket ettirdiğinizde düğmenin stilini değiştirmek için :hover seçiciyi kullanın .

CSS:

.button {

 -webkit-transition-duration: 0.4s; /* Safari */

 transition-duration: 0.4s;
}

.button:hover {

 background-color: #e67e22; /*Carrot*/

 color: white;
}

ÇIKTI:

Gölgeli Button

---

Bir düğmeye gölgeler eklemek için box-shadow özelliğini kullanın:

CSS:

.button1 {

    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.button2:hover {

    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

ÇIKTI:

Disabled Buttons

---

Bir düğmeye şeffaflık eklemek için opacity özelliği kullanın ("devre dışı" görünüm oluşturur).

CSS:

.disabled {

    opacity: 0.6;

    cursor: not-allowed;
}

ÇIKTI:

Buttons Uzunluk Verme

---

CSS:

.button1 {width: 250px;}

.button2 {width: 50%;}

.button3 {width: 100%;}

ÇIKTI:

Button Gurup Oluşturma

---

Bir düğme grubu oluşturmak için kenar boşluklarını kaldırın ve float:left özelliğiyle yanyana getirin.

CSS:

.button {

    float: left;
}

HTML:

<div class="btn-group">

  <button class="button">Button</button>

  <button class="button">Button</button>

  <button class="button">Button</button>

  <button class="button">Button</button>

</div> 
 

ÇIKTI:

Kenarlıklı Düğme Grubu

---

Kenarlıklı(border) düğme grubu oluşturmak için border özelliği kullanın:

CSS:

.button {

    float: left;

    border: 1px solid green;

    }

.btn-group .button:not(:last-child) {

 border-right: none; /*çift border kaldırır*/

}

ÇIKTI:

Dikey Button Gurupları

---

Birbirinin altındaki düğmeleri gruplandırmak için display:block css özelliğini kullanın

CSS:

.btn-group .button {

    background-color: #e67e22; 

    border: 1px solid green;

    color: white;

    padding: 15px 32px;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    font-size: 16px;

    cursor: pointer;

    width: 150px;

    display: block;
}

.btn-group .button:not(:last-child) {

    border-bottom: none; /* Çift borderleri önler */
}

.btn-group .button:hover {

    background-color: #b3621a
}

HTML:

<div class="btn-group">

  <button class="button">Button</button>

  <button class="button">Button</button>

  <button class="button">Button</button>

  <button class="button">Button</button>

</div>

ÇIKTI:

Animasyonlu Buttonlar

---

Buttonun üzerine bir ok ekleyin.

CSS:

.button {

  display: inline-block;

  border-radius: 4px;

  background-color: #f4511e;

  border: none;

  color: #FFFFFF;

  text-align: center;

  font-size: 28px;

  padding: 20px;

  width: 200px;

  transition: all 0.5s;

  cursor: pointer;

  margin: 5px;
}

.button span {

  cursor: pointer;

  display: inline-block;

  position: relative;

  transition: 0.5s;
}

.button span:after {

  content: '\00bb';

  position: absolute;

  opacity: 0;

  top: 0;

  right: -20px;

  transition: 0.5s;
}

.button:hover span {

  padding-right: 25px;
}

.button:hover span:after {

  opacity: 1;

  right: 0;
}

HTML:

<button class="button" style="vertical-align:middle">

<span>Hover </span></button>

ÇIKTI:

Button'a Tıklamada "basılı" bir efekt ekleyin:

CSS:

.button {

  display: inline-block;

  padding: 15px 25px;

  font-size: 24px;

  cursor: pointer;

  text-align: center;

  text-decoration: none;

  outline: none;

  color: #fff;

  background-color:#f4511e;

  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);
}

HTML:

<button class="button">Tıkla</button> 

ÇIKTI:

Soluk Button yapalım.

CSS:

.button {

  background-color: #f4511e;

  border: none;

  color: white;

  padding: 16px 32px;

  text-align: center;

  font-size: 16px;

  margin: 4px 2px;

  opacity: 0.6;

  transition: 0.3s;

  display: inline-block;

  text-decoration: none;

  cursor: pointer;
}

.button:hover {opacity: 1}

HTML:

<button class="button">On Mause </button>

ÇIKTI:

Button Tıklamada 'dalgalanma' efect ekleyin:

CSS:

.button {

position: relative;

background-color: #4CAF50;

border: none;

font-size: 28px;

color: #FFFFFF;

 padding: 20px;

 width: 200px;

text-align: center;

-webkit-transition-duration: 0.4s;

transition-duration: 0.4s;

text-decoration: none;

overflow: hidden;

cursor: pointer;    
}

.button:after {

content: "";

background: #f1f1f1;

display: block;

position: absolute;

padding-top: 300%;

padding-left: 350%;

margin-left: -20px !important;

margin-top: -120%;

opacity: 0;

transition: all 0.8s
}

.button:active:after {

padding: 0;

margin: 0;

opacity: 1;

transition:0s
}

HTML:

<button class="button">Tıkla</button>

ÇIKTI:

969

Gönder