buton
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, gimpproğ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:
|
1
2
3
4
5
|
<button>Tıkla!</button>
<input type="submit" value="Tıkla!">
<a href="#">Tıkla!</a>
|
Temel Button Style Verme
HTML:
|
1
2
3
4
5
6
7
|
<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:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
.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:
|
1
2
3
4
5
6
7
8
9
|
.button2 {background-color:#008CBA}
.button3 {background-color:#bdc3c7;
color: black;}
.button4 {background-color:#16a085}
.button5 {background-color:#555555}
|
HTML:
|
1
2
3
4
5
6
7
8
9
|
<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:
|
1
2
3
4
5
6
7
8
9
|
.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:
|
1
2
3
4
5
6
7
8
9
|
.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:
|
1
2
3
4
5
6
7
8
9
10
11
|
.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:
|
1
2
3
4
5
6
7
8
|
.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:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
.button {
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
}
.button:hover {
background-color: #e67e22;
color: white;
}
|
ÇIKTI:
Gölgeli Button
Bir düğmeye gölgeler eklemek için box-shadow özelliğini kullanın:
CSS:
|
1
2
3
4
5
6
7
8
9
|
.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:
|
1
2
3
4
5
6
|
.disabled {
opacity: 0.6;
cursor: not-allowed;
}
|
ÇIKTI:
Buttons Uzunluk Verme
CSS:
|
1
2
3
4
5
|
.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:
HTML:
|
1
2
3
4
5
6
7
8
9
10
11
|
<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:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
.button {
float: left;
border: 1px solid green;
}
.btn-group .button:not(:last-child) {
border-right: none;
}
|
ÇIKTI:
Dikey Button Gurupları
Birbirinin altındaki düğmeleri gruplandırmak için display:block css özelliğini kullanın
CSS:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
.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;
}
.btn-group .button:hover {
background-color: #b3621a
}
|
HTML:
|
1
2
3
4
5
6
7
8
9
10
11
|
<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:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
.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:
|
1
2
3
|
<button class="button" style="vertical-align:middle">
<span>Hover </span></button>
|
ÇIKTI:
Button'a Tıklamada "basılı" bir efekt ekleyin:
CSS:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
.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:
|
1
|
<button class="button">Tıkla</button>
|
ÇIKTI:
Soluk Button yapalım.
CSS:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
.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:
|
1
|
<button class="button">On Mause </button>
|
ÇIKTI:
Button Tıklamada 'dalgalanma' efect ekleyin:
CSS:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
.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:
|
1
|
<button class="button">Tıkla</button>
|
ÇIKTI: