Css ile Buton Yapımı (3d Buton, Yuvarlak Buton, Animasyonlu Buton vb..)

admin Web Tasarım Örnekleri ve Uygulamaları Şubat 15, 2019 6

Bu yazımızda web sitelerinde sıklıkla gördüğümüz ve kullandığımız butonlardan bahsedeceğim. Html ve Css ile buton yapımı konusuna geçmeden önce buton ne demek yani buton nedir bunu anlamaya çalışalım.

Butonları birden fazla amaç için kullanabiliyoruz. Tabi bu amaca göre de buton oluştururken kullandığımız Html etiketleri değişebiliyor. Öncelikle sadece Html kullanarak buton nasıl oluşturulur inceledikten sonra Css kodları yazarak bu butonlara nasıl stiller verebileceğimize bakalım.

HTML İLE BUTON OLUŞTURMA

Hiç Css kodu yazmadan kullanış amacımıza göre şu şekilde butonlar yapabiliriz.

⇒ Örneğin bir butona tıklandığında bir olayı yakalama vb.. gibi durumlarda,

<button>Tıkla</button>

<button>Tıkla</button>

Html etiketini kullanıyoruz.

⇒ Bir form doldurulduktan sonra Gönder butonuna tıklandığında formdaki bilgileri sunucuya gönderme vb.. durumlarda,

<input type="submit" value="Gönder">

Html etiketini kullanıyoruz.

⇒ Sayfalar arası geçişler için veya herhangi bir adrese link vermek için buton görünümlü linkler oluşturmak istiyorsak,

<a href="#">İletişim Sayfasına Git</a>

<a href="#">İletişim Sayfasına Git</a>

Html etiketini kullanıyoruz.

Bu 3 şekilde oluşan basit buton, submit buton ve link butonun görünümü şu şekilde.

Şimdi de bu Html etiketlerine Css özellikleri ile stiller vererek daha güzel görünümler elde edelim.

CSS İLE BUTON YAPIMI

En basit haliyle buton oluşturmak için genelde şu Css özelliklerini kullanıyoruz.

width
height
background-color
color
border

Bunların dışında butonun köşelerinin oval olmasını veya tam yuvarlak olmasını istiyorsak,

border-radius

özelliğini kullanıyoruz.

Daha ileri seviye buton yapımı (3d Buton, Animasyonlu butonlar vb..) için bazı ileri seviye Css3 özelliklerini kullanmamız gerekiyor.

Şimdi hem temel seviyede hem de ileri seviyede buton çeşitlerini ve buton örneklerini inceleyelim.

Önemli : İcon kullandığımız buton örnekleri için Font Awesome Versiyon 5.3.1’i kullanıyorum. Sizde icon kullanarak buton oluşturmak isterseniz Html sayfanızın <head> </head> etiketleri arasına aşağıdaki CDN linkini eklemeyi unutmayın. Font Awesome hakkında daha fazla bilgi edinmek için tıklayınız.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

⇒ Örneklere geçmeden önce şunu da belirteyim. Hiç Css kodu yazmadan da butonlarımızı oluşturabiliriz. Bunun için birçok framework bulunuyor. Dünya genelinde en popüler olanı ise Bootstrap‘tır.

Bootstrap hakkında daha fazla bilgi almak isterseniz BOOTSTRAP NEDİR? BOOTSTRAP NASIL KULLANILIR? yazımı okuyabilirsiniz.

Bootstrap ile butonları nasıl yapabileceğimizi öğrenmek için ise BOOTSTRAP 4 – BUTTONS (BUTONLAR) yazımı inceleyebilirsiniz.

BASİT BUTON YAPMA

Html Kodları

<button class="btn-1">Button</button>
<button class="btn-2">Button</button>

<button class="btn-1">Button</button>

<button class="btn-2">Button</button>

Css Kodları

.btn-1 {
border: none;
color: white;
background-color: #4CAF50;
padding: 10px 20px;
cursor: pointer;
border: 2px solid #4CAF50;
}
.btn-1:hover {
color: #4CAF50;
background-color: #fff;
border: 2px solid #4CAF50;
}
.btn-2 {
border: 2px solid #4CAF50;
background-color: white;
color: #4CAF50;
padding: 10px 20px;
cursor: pointer;
}
.btn-2:hover {
color: #fff;
background-color: #4CAF50;
}

.btn-1 {

border: none;

color: white;

background-color: #4CAF50;

padding: 10px 20px;

cursor: pointer;

border: 2px solid #4CAF50;

}

.btn-1:hover {

color: #4CAF50;

background-color: #fff;

border: 2px solid #4CAF50;

}

.btn-2 {

border: 2px solid #4CAF50;

background-color: white;

color: #4CAF50;

padding: 10px 20px;

cursor: pointer;

}

.btn-2:hover {

color: #fff;

background-color: #4CAF50;

}

Görünümü

KÖŞELERİ YUVARLATILMIŞ VEYA TAM YUVARLAK BUTON YAPMA

Html Kodları

<button class="btn-1">Button</button>
<button class="btn-2">Button</button>

<button class="btn-1">Button</button>

<button class="btn-2">Button</button>

Css Kodları

.btn-1 {
border: none;
color: white;
background-color: #4CAF50;
padding: 10px 20px;
cursor: pointer;
border: 2px solid #4CAF50;
-moz-border-radius: 16px;
-webkit-border-radius: 16px;
border-radius: 16px;
}
.btn-1:hover {
color: #4CAF50;
background-color: #fff;
border: 2px solid #4CAF50;
}
.btn-2 {
width: 70px;
height: 70px;
border: none;
color: white;
background-color: #4CAF50;
cursor: pointer;
border: 2px solid #4CAF50;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.btn-2:hover {
color: #4CAF50;
background-color: #fff;
border: 2px solid #4CAF50;
}

.btn-1 {

border: none;

color: white;

background-color: #4CAF50;

padding: 10px 20px;

cursor: pointer;

border: 2px solid #4CAF50;

-moz-border-radius: 16px;

-webkit-border-radius: 16px;

border-radius: 16px;

}

.btn-1:hover {

color: #4CAF50;

background-color: #fff;

border: 2px solid #4CAF50;

}

.btn-2 {

width: 70px;

height: 70px;

border: none;

color: white;

background-color: #4CAF50;

cursor: pointer;

border: 2px solid #4CAF50;

-moz-border-radius: 50%;

-webkit-border-radius: 50%;

border-radius: 50%;

}

.btn-2:hover {

color: #4CAF50;

background-color: #fff;

border: 2px solid #4CAF50;

}

Görünümü

İCON KULLANARAK BUTON OLUŞTURMA

Html Kodları

<button class="btn-1"> <i class="fa fa-angle-double-left"></i> Back</button>
<button class="btn-1"> Next<i class="fa fa-angle-double-right"></i> </button>

Css Kodları

.btn-1 {
background-color: #4CAF50;
color: white;
padding: 14px;
cursor: pointer;
border: 1px solid #4CAF50;
}
.btn-1 .fa {
margin-left: 5px;
}
.btn-1:hover {
background-color: #fff;
color: #4CAF50;
border: 1px solid #4CAF50;
}

.btn-1 {

background-color: #4CAF50;

color: white;

padding: 14px;

cursor: pointer;

border: 1px solid #4CAF50;

}

.btn-1 .fa {

margin-left: 5px;

}

.btn-1:hover {

background-color: #fff;

color: #4CAF50;

border: 1px solid #4CAF50;

}

Görünümü

İCON KULLANARAK BİLDİRİM BUTONU OLUŞTURMA

Html Kodları

<a href="#" class="btn-1">
<span><i class="fa fa-envelope"></i></span>
<span class="badge">12</span>
</a>

</a>

Css Kodları

.btn-1 {
background-color: #4CAF50;
color: white;
text-decoration: none;
padding: 10px 12px;
position: relative;
display: inline-block;
}
.btn-1 .badge {
position: absolute;
top: -12px;
right: -15px;
padding: 3px 5px;
border-radius: 50%;
background-color: #fff;
color: #4CAF50;
border: 1px solid #4CAF50;
}

.btn-1 {

background-color: #4CAF50;

color: white;

text-decoration: none;

padding: 10px 12px;

position: relative;

display: inline-block;

}

.btn-1 .badge {

position: absolute;

top: -12px;

right: -15px;

padding: 3px 5px;

border-radius: 50%;

background-color: #fff;

color: #4CAF50;

border: 1px solid #4CAF50;

}

Görünümü

3D (ÜÇ BOYUTLU) BUTON ÖRNEKLERİ – 1

Html Kodları

<button class="btn-1">3D Button</button>

<button class="btn-1">3D Button</button>

Css Kodları

.btn-1 {
padding: 14px 24px;
text-align: center;
cursor: pointer;
outline: none;
color: #fff;
background-color: #4CAF50;
border: none;
border-radius: 15px;
box-shadow: 0 4px #bbb;
}
.btn-1:hover {
background-color: #4CAF50;
}
.btn-1:active {
background-color: #4CAF50;
box-shadow: 0 3px #444;
transform: translateY(3px);
}

.btn-1 {

padding: 14px 24px;

text-align: center;

cursor: pointer;

outline: none;

color: #fff;

background-color: #4CAF50;

border: none;

border-radius: 15px;

box-shadow: 0 4px #bbb;

}

.btn-1:hover {

background-color: #4CAF50;

}

.btn-1:active {

background-color: #4CAF50;

box-shadow: 0 3px #444;

transform: translateY(3px);

}

Görünümü

3D (ÜÇ BOYUTLU) BUTON ÖRNEKLERİ – 2

Html Kodları

<a href="#" class="button green shield">Link-1</a>
<a href="#" class="button green rectangular">Link-2</a>
<a href="#" class="button green criss-cross">Link-3</a>
<a href="#" class="button green one-corner">Link-4</a>
<a href="#" class="button green rectangular">5</a>
<a href="#" class="button green criss-cross">6</a>

Css Kodları

.button {
text-decoration: none;
color: #fff;
font-weight: bold;
padding: 12px 20px;
border-radius: 10px;
background-color: #666666;
box-shadow: 0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);
position: relative;
border-bottom: 1px solid rgba(255,255,255,0.2);
display: inline-block;
text-shadow: 0px -1px 0px rgba(0,0,0,0.2);
margin-bottom: 40px;
margin-right:20px;
}
.shield {
border-radius: 5px 5px 35px 35px;
padding-left: 25px;
padding-right: 25px;
}
.criss-cross {
border-radius: 35px 5px;
}
.rectangular {
border-radius: 10px / 35px;
}
.one-corner {
border-radius: 5px 5px 35px 5px;
padding-right: 25px;
}
.button:active {
top: 7px;
box-shadow: 0 2px 0 #393939, 0px 4px 4px rgba(0,0,0,0.4), inset 0px 2px 5px rgba(0,0,0,0.2);
}
.green {
background-color: #7fc345;
box-shadow: 0 5px 5px #508530, 0 9px 0 #385e25, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);
}
.green:hover {
box-shadow: 0 5px 5px #508530, 0 9px 0 #385e25, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);
}
.green:active {
box-shadow: 0 2px 0 #385e25, 0px 4px 4px rgba(0,0,0,0.4), inset 0px 2px 5px rgba(0,0,0,0.2);
}

.button {

text-decoration: none;

color: #fff;

font-weight: bold;

padding: 12px 20px;

border-radius: 10px;

background-color: #666666;

box-shadow: 0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);

position: relative;

border-bottom: 1px solid rgba(255,255,255,0.2);

display: inline-block;

text-shadow: 0px -1px 0px rgba(0,0,0,0.2);

margin-bottom: 40px;

margin-right:20px;

}

.shield {

border-radius: 5px 5px 35px 35px;

padding-left: 25px;

padding-right: 25px;

}

.criss-cross {

border-radius: 35px 5px;

}

.rectangular {

border-radius: 10px / 35px;

}

.one-corner {

border-radius: 5px 5px 35px 5px;

padding-right: 25px;

}

.button:active {

top: 7px;

box-shadow: 0 2px 0 #393939, 0px 4px 4px rgba(0,0,0,0.4), inset 0px 2px 5px rgba(0,0,0,0.2);

}

.green {

background-color: #7fc345;

box-shadow: 0 5px 5px #508530, 0 9px 0 #385e25, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);

}

.green:hover {

box-shadow: 0 5px 5px #508530, 0 9px 0 #385e25, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);

}

.green:active {

box-shadow: 0 2px 0 #385e25, 0px 4px 4px rgba(0,0,0,0.4), inset 0px 2px 5px rgba(0,0,0,0.2);

}

Görünümü

ANİMASYONLU BUTON ÖRNEKLERİ – 1

Html Kodları

<button class="btn-1"> 
<span>Hover Button</span> 
</button>
<button class="btn-2">Click Button</button>

<span>Hover Button</span>

</button>

<button class="btn-2">Click Button</button>

Css Kodları

.btn-1 {
background-color: #4CAF50;
border: none;
color: #FFFFFF;
padding: 15px;
width: 160px;
transition: all 0.5s;
cursor: pointer;
}
.btn-1 span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.btn-1 span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: -3px;
right: -20px;
transition: 0.5s;
font-size: 18px;
}
.btn-1:hover span {
padding-right: 15px;
}
.btn-1:hover span:after {
opacity: 1;
right: 0;
}
.btn-2 {
position: relative;
background-color: #4CAF50;
border: 1px solid #4CAF50;
color: #FFFFFF;
padding: 15px;
width: 160px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}
.btn-2:after {
content: "";
background: #e8b4b4;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px !important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s;
}
.btn-2:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s;
}

.btn-1 {

background-color: #4CAF50;

border: none;

color: #FFFFFF;

padding: 15px;

width: 160px;

transition: all 0.5s;

cursor: pointer;

}

.btn-1 span {

cursor: pointer;

display: inline-block;

position: relative;

transition: 0.5s;

}

.btn-1 span:after {

content: '\00bb';

position: absolute;

opacity: 0;

top: -3px;

right: -20px;

transition: 0.5s;

font-size: 18px;

}

.btn-1:hover span {

padding-right: 15px;

}

.btn-1:hover span:after {

opacity: 1;

right: 0;

}

.btn-2 {

position: relative;

background-color: #4CAF50;

border: 1px solid #4CAF50;

color: #FFFFFF;

padding: 15px;

width: 160px;

-webkit-transition-duration: 0.4s;

transition-duration: 0.4s;

text-decoration: none;

overflow: hidden;

cursor: pointer;

}

.btn-2:after {

content: "";

background: #e8b4b4;

display: block;

position: absolute;

padding-top: 300%;

padding-left: 350%;

margin-left: -20px !important;

margin-top: -120%;

opacity: 0;

transition: all 0.8s;

}

.btn-2:active:after {

padding: 0;

margin: 0;

opacity: 1;

transition: 0s;

}

Görünümü

ANİMASYONLU BUTON ÖRNEKLERİ – 2

Html Kodları

<div>
<button class="round green">
Hover<span class="round">Tincidunt integer eu augue augue nunc elit dolor</span>
</button>
</div>

<div>

Hover<span class="round">Tincidunt integer eu augue augue nunc elit dolor</span>

</button>

</div>

Css Kodları

* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
div {
list-style: none;
position: relative;
display: inline-block;
width: 100px;
height: 100px;
}
@-moz-keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
@-webkit-keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
@-o-keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
.round {
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
text-decoration: none;
text-align: center;
font-size: 25px;
text-shadow: 0 1px 0 rgba(255,255,255,.7);
letter-spacing: -.065em;
font-family: "Hammersmith One", sans-serif;
-webkit-transition: all .25s ease-in-out;
-o-transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
box-shadow: 2px 2px 7px rgba(0,0,0,.2);
border-radius: 300px;
z-index: 1;
border-width: 4px;
border-style: solid;
}
.round:hover {
width: 130%;
height: 130%;
left: -15%;
top: -15%;
font-size: 33px;
padding-top: 38px;
cursor:pointer;
-moz-box-shadow: 5px 5px 10px rgba(0,0,0,.3);
-webkit-box-shadow: 5px 5px 10px rgba(0,0,0,.3);
box-shadow: 5px 5px 10px rgba(0,0,0,.3);
z-index: 2;
-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
transform: rotate(-360deg);
}
button.green {
background-color: rgba(1,151,171,1);
color: rgba(0,63,71,1);
border-color: rgba(0,63,71,.2);
}
button.green:hover {
color: rgba(1,151,171,1);
}
.round span.round {
display: block;
opacity: 0;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
font-size: 1px;
border: none;
padding: 40% 20% 0 20%;
color: #fff;
}
.round span:hover {
opacity: .85;
font-size: 16px;
text-shadow: 0 1px 1px rgba(0,0,0,.5);
}
.green span {
background: rgba(0,63,71,.7);
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

* {

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

box-sizing: border-box;

}

div {

list-style: none;

position: relative;

display: inline-block;

width: 100px;

height: 100px;

}

@-moz-keyframes rotate {

0% {

transform: rotate(0deg);

}

100% {

transform: rotate(-360deg);

}

@-webkit-keyframes rotate {

0% {

transform: rotate(0deg);

}

100% {

transform: rotate(-360deg);

}

@-o-keyframes rotate {

0% {

transform: rotate(0deg);

}

100% {

transform: rotate(-360deg);

}

@keyframes rotate {

0% {

transform: rotate(0deg);

}

100% {

transform: rotate(-360deg);

}

.round {

display: block;

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;

text-decoration: none;

text-align: center;

font-size: 25px;

text-shadow: 0 1px 0 rgba(255,255,255,.7);

letter-spacing: -.065em;

font-family: "Hammersmith One", sans-serif;

-webkit-transition: all .25s ease-in-out;

-o-transition: all .25s ease-in-out;

-moz-transition: all .25s ease-in-out;

transition: all .25s ease-in-out;

box-shadow: 2px 2px 7px rgba(0,0,0,.2);

border-radius: 300px;

z-index: 1;

border-width: 4px;

border-style: solid;

}

.round:hover {

width: 130%;

height: 130%;

left: -15%;

top: -15%;

font-size: 33px;

padding-top: 38px;

cursor:pointer;

-moz-box-shadow: 5px 5px 10px rgba(0,0,0,.3);

-webkit-box-shadow: 5px 5px 10px rgba(0,0,0,.3);

box-shadow: 5px 5px 10px rgba(0,0,0,.3);

z-index: 2;

-webkit-transform: rotate(-360deg);

-moz-transform: rotate(-360deg);

-o-transform: rotate(-360deg);

transform: rotate(-360deg);

}

button.green {

background-color: rgba(1,151,171,1);

color: rgba(0,63,71,1);

border-color: rgba(0,63,71,.2);

}

button.green:hover {

color: rgba(1,151,171,1);

}

.round span.round {

display: block;

opacity: 0;

-webkit-transition: all .5s ease-in-out;

-moz-transition: all .5s ease-in-out;

-o-transition: all .5s ease-in-out;

transition: all .5s ease-in-out;

font-size: 1px;

border: none;

padding: 40% 20% 0 20%;

color: #fff;

}

.round span:hover {

opacity: .85;

font-size: 16px;

text-shadow: 0 1px 1px rgba(0,0,0,.5);

}

.green span {

background: rgba(0,63,71,.7);

}

Görünümü

Umarım sizin için yararlı bir yazı olmuştur.

Şu yazılarda ilginizi çekebilir.

Html ve Css ile Sosyal Medya Butonları Yapımı

Css ile Html Ortalama (Yazı, Resim, Form, Tablo, Sayfa, Menü vb..)

Css ile Toggle Switch Yapımı

Jquery ile Beğendim – Beğenmedim Uygulaması

Jquery ile Butona Tıklayınca Metin Kutusundaki Sayıyı Artırmak ve Azaltmak

Yeni bir yazımda görüşmek üzere.

Yazar Hakkında

admin Yazar E-Posta

Yeni bilgiler öğrenmeyi ve öğrendiklerini paylaşmayı seven, web teknolojileri ile yakından ilgilenen, freelance çalışan bir full stack web developer.

6 Yorum

hüseyin uslu Ağustos 1, 2019 Cevapla

merhaba, peki butonlara responsive özelliğini katmak istesek. ?

admin Ağustos 2, 2019

Merhaba Hüseyin. Butonlara responsive özelliği katmak için width özelliğine 100% değeri verebilirsin. Bu şekilde yaptığında block buton oluşturmuş olursun. Yani masaüstü bilgisayarda da tam genişlikte olur telefon veya tablette de. Html ve Css kodları şu şekilde:

<style>
.btn-responsive-1 {
border: none;
color: white;
background-color: #4CAF50;
padding: 10px 20px;        
width: 100%;        
cursor: pointer;
border: 2px solid #4CAF50;
}
.btn-responsive-1:hover {
color: #4CAF50;
background-color: #fff;
border: 2px solid #4CAF50;
}
</style>
<button class="btn-responsive-1">Button - 1</button>

<style>

.btn-responsive-1 {

border: none;

color: white;

background-color: #4CAF50;

padding: 10px 20px;

width: 100%;

cursor: pointer;

border: 2px solid #4CAF50;

}

.btn-responsive-1:hover {

color: #4CAF50;

background-color: #fff;

border: 2px solid #4CAF50;

}

</style>

<button class="btn-responsive-1">Button - 1</button>

Eğer masaüstü bilgisayarda butonun çok geniş olduğunu düşünürsen max-width özelliği ile bunu çözebilirsin. Örneğin butonun max-width özelliğine 500px verirsen telefonda 100% genişlikte iken masaüstü bilgisayarda 500px genişliğinde olur. Html ve Css kodları şu şekilde:

<style>
.btn-responsive-2 {
border: none;
color: white;
background-color: #4CAF50;
padding: 10px 20px;        
width: 100%;
max-width: 500px;
cursor: pointer;
border: 2px solid #4CAF50;
}
.btn-responsive-2:hover {
color: #4CAF50;
background-color: #fff;
border: 2px solid #4CAF50;
}
</style>
<button class="btn-responsive-2">Button - 2</button>

<style>

.btn-responsive-2 {

border: none;

color: white;

background-color: #4CAF50;

padding: 10px 20px;

width: 100%;

max-width: 500px;

cursor: pointer;

border: 2px solid #4CAF50;

}

.btn-responsive-2:hover {

color: #4CAF50;

background-color: #fff;

border: 2px solid #4CAF50;

}

</style>

<button class="btn-responsive-2">Button - 2</button>

İyi çalışmalar.

Aybars Aralık 2, 2020 Cevapla

Kenarı yuvarlatılmış linkli bir buton nasıl yapabilirim?

admin Aralık 7, 2020

<style>
.btn{
text-decoration: none;
background-color: cornflowerblue;
color: white;
padding: 12px 24px;
border-radius: 6px;
display: inline-block;
}
.btn:hover{
cursor:pointer;
background-color: blue;
}
</style>
<a href="#" class="btn"" rel="nofollow ugc">Link Button</a>

<style>

.btn{

text-decoration: none;

background-color: cornflowerblue;

color: white;

padding: 12px 24px;

border-radius: 6px;

display: inline-block;

}

.btn:hover{

cursor:pointer;

background-color: blue;

}

</style>

<a href="#" class="btn"" rel="nofollow ugc">Link Button</a>

İyi çalışmalar.

dezon Eylül 29, 2023 Cevapla

search buttonunu nasıl köşeleri yumşaltılmış bir şekilde yapabilirim

admin Eylül 29, 2023

border-radius özelliği ile yapabilirsiniz.

HTML İLE BUTON OLUŞTURMA

CSS İLE BUTON YAPIMI

BASİT BUTON YAPMA

KÖŞELERİ YUVARLATILMIŞ VEYA TAM YUVARLAK BUTON YAPMA

İCON KULLANARAK BUTON OLUŞTURMA

İCON KULLANARAK BİLDİRİM BUTONU OLUŞTURMA

3D (ÜÇ BOYUTLU) BUTON ÖRNEKLERİ – 1

3D (ÜÇ BOYUTLU) BUTON ÖRNEKLERİ – 2

ANİMASYONLU BUTON ÖRNEKLERİ – 1

ANİMASYONLU BUTON ÖRNEKLERİ – 2

Benzer Yazılar

Yazar Hakkında

6 Yorum

Yorum Yazın