CSS İLE BUTTON TASARIMI - WebCebir

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:

Default Button Link Button 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:

Carrot Blue Silver Green sea Black

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:

12px 16px 20px 24px 28px

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:

10px 24px 12px 32px 14px 46px 30px 15px 20px

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:

2px 4px 8px 12px 30px 50%

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:

Carrot Blue Red Silver Black

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:

Carrot Blue Red Silver Black

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:

Gölgeli Buton Gölgeli hover buton

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:

Normal Button Disabled Button

Buttons Uzunluk Verme

CSS:

.button1 {width: 250px;} .button2 {width: 50%;} .button3 {width: 100%;}

ÇIKTI:

250px 50% 100%

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:

Button Button Button Button

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:

Button Button Button Button

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:

Button Button Button Button

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:

Hover

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:

Tıkla

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:

On Mause

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:

Tıkla

misafir_üye 23/05/2019

Yararlı bir Yazı olmuş Teşekkürler,

train_566 30/12/2020

merhaba bloggerde css ekleye css i girdim ama buton kodunu yazdıktan sonra buton normal buton olarak gözüküyor işe yaramıyor.

yönetici 01/01/2021

Hazır sistemler kullanmadım. google'dan "blogger'de buton ekleme" aratması yap

Nao atman 20/05/2021

Selamın aleyküm, hocam size sorun olucaktı butona tiklayınca mavi bir hover veriyor nasıl kaldırabilirim yardım edermisiniz.

yönetici 21/05/2021

css dış çizgiye 0 değerini ver. Konusuna CSS OUTLİNE(DIŞ HAT ÇİZGİ) bak.

Hüseyin Gökmen 11/11/2022

Hocam emek verip bu yazıyı hazırlamışsınız internette css buton yapımına dair en kullanışlı veriler bunlar elinize emeğinize sağlık teşekkürer Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır. Lütfen Yukarıda ki mesajları okuyun tekrar aynı soruları sormayın.

194

Gönder