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:

Link Button

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 .

İpucu: "vurgu" etkisinin hızını belirlemek için transition-duration özelliğini 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).

İpucu: Ayrıca cursorü, düğmeye mouse ile üzerine geldiğinizde "izin verilmeyen" bir imlec'de ekleyebilirsiniz:

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:

Ç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:

Ç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:

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

3448

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
POPÜLER MAKALE
  • HTML RESME LİNK VERME
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML FORM OLUŞTURMA
  • HTML DİV ve SPAN NEDİR?
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML ARKAPLANA MÜZİK EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML RESİM EKLEME
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.