Rengarenk CSS3 Butonlar Oluşturma

google fonts, text-shadow, box-shadow ile zenginleştirilmiş birbirinden güzel 20 tane buton.

Temel buton tasarımında .button{ padding:5px 15px 5px 15px; text-decoration: none; display: inline-block; -border-radius: 10px; tanımlamalarının yanında her bir buton için ek bir kaç düzenleme daha yapacağız. Aşağıda adım adım butonlar oluşturulmuştur.

DEMO

Adım 1: Head Etiketinin Oluşturulması

Head etiketleri arasında tasarımda kullanacağımız tasarim.css dosyasını ve google fonts sitesinden sitemize dahil edeceğimizi fontu aşağıdaki gibi belirledik.


<head>
<meta charset="utf-8">
<title>GÜZEL BUTONLAR</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style/tasarim.css" /> 
</head>

<head>

<title>GÜZEL BUTONLAR</title>

</head>

Adım 2: HTML Etiketlerinin Oluşturulması


<a href="#" class="button btn1">CSS Tasarım</a>
<a href="#" class="button btn2">HTML5</a>
<a href="#" class="button btn3">Web Tasarım</a>
<a href="#" class="button btn4">PHP Programlama</a>
<a href="#" class="button btn5">ASP.NET</a>
<a href="#" class="button btn6">Mobile Tasarım</a>
<a href="#" class="button btn7">YAZILIMBILISIM</a>
<a href="#" class="button btn8">Adobe</a>
<a href="#" class="button btn9">Adobe Dreamweaver</a>
<a href="#" class="button btn10">Adobe Photoshop</a>
<a href="#" class="button btn11">Jquery</a>
<a href="#" class="button btn12">Jquery UI</a>
<a href="#" class="button btn13">Internet Programcılığı</a>
<a href="#" class="button btn14">Grafik Animasyon</a>
<a href="#" class="button btn15">Veritabanı</a>
<a href="#" class="button btn16">MySQL</a>
<a href="#" class="button btn17">MsSQL SERVER</a>
<a href="#" class="button btn18">NodeJS</a>
<a href="#" class="button btn19">Cloud</a>
<a href="#" class="button btn20">NoSQL</a>

<a href="#" class="button btn1">CSS Tasarım</a>

<a href="#" class="button btn3">Web Tasarım</a>

<a href="#" class="button btn4">PHP Programlama</a>

<a href="#" class="button btn6">Mobile Tasarım</a>

<a href="#" class="button btn7">YAZILIMBILISIM</a>

<a href="#" class="button btn8">Adobe</a>

<a href="#" class="button btn9">Adobe Dreamweaver</a>

<a href="#" class="button btn10">Adobe Photoshop</a>

<a href="#" class="button btn11">Jquery</a>

<a href="#" class="button btn12">Jquery UI</a>

<a href="#" class="button btn13">Internet Programcılığı</a>

<a href="#" class="button btn14">Grafik Animasyon</a>

<a href="#" class="button btn15">Veritabanı</a>

<a href="#" class="button btn16">MySQL</a>

<a href="#" class="button btn17">MsSQL SERVER</a>

<a href="#" class="button btn18">NodeJS</a>

<a href="#" class="button btn19">Cloud</a>

<a href="#" class="button btn20">NoSQL</a>

Adım 3: Temel CSS Tanımlamaları

Bu adımda sitenin arkaplanını ve buton için gerekli olan tasarımı oluşturacağız. Buton tasarımında genel CSS düzenlemelerin dışında font-family özelliğine google font sitesinden aldığım fontu etkedim.


body{
 background-color:#FFFFF7;
 }

.button{
padding:5px 15px 5px 15px;
text-decoration: none;
display: inline-block;
border-radius: 10px;
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
border-bottom: 1px solid rgba(0,0,0,0.25);
font-family: 'Open Sans', sans-serif;
outline:none;
position:relative;
font-size: 32px;
margin:10px;
white-space:nowrap;
}

.button:hover{
background-color: #777;
}

body{

background-color:#FFFFF7;

}

.button{

padding:5px 15px 5px 15px;

text-decoration: none;

display: inline-block;

border-radius: 10px;

box-shadow: 0 1px 3px rgba(0,0,0,0.5);

border-bottom: 1px solid rgba(0,0,0,0.25);

font-family: 'Open Sans', sans-serif;

outline:none;

position:relative;

font-size: 32px;

margin:10px;

white-space:nowrap;

}

.button:hover{

background-color: #777;

}

Ekran görüntüsü aşağıdaki gibi oluşacaktır.

Adım 4: Butonları CSS Tanımlamaları

Şimdi sıra geldi her bir butonun tasarımını istediğimiz gibi değiştirmeye. CSS tanımlamaları kolay olsun diye her bir buton için btn* classını kullandım.


.btn1{
background-color: #a3a3a3;
border: 2px solid #777;
color: #FFF;
font-weight:bold;
text-shadow: 0 1px 1px rgba(0,0,0,0.8);
}
.btn2{
background: #666;
border: 2px solid #777;
color: #000;
text-shadow: 0px 1px 1px #fff;
font-weight: bold;
}
.btn3{
color: #fff;
background: #888;
border: 2px solid #777;
text-shadow: 1px 1px 6px #fff;
}
.btn4{
color: #fff;
background: #fff;
text-shadow: 1px 1px 4px #000;
border: 2px solid #f0f0f0;
font-family: "Arial";
font-weight:bold;
text-transform:uppercase;
letter-spacing:-1px;
}
.btn4:hover{
background-color:#f1f1f1;
}
.btn5{
background-color: #B00000;
border: 1px solid #7F0000;
color: #FFF;
text-shadow: 1px 1px 4px #000;
font-family: "Palatino Linotype";
}
.btn5:hover{
background-color:#800000;
}

.btn6{
background-color: #7FB0F0;
color: #FFF;
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
font-weight:100;
}
.btn6:hover{
background-color:#7FA0C0;
}
.btn7{
background-color: #B0E000;
border: 1px outset #D0E000;
color: #FFF;
font-style:italic;
text-shadow: 0 2px 1px rgba(0,0,0,0.2);
}
.btn7:hover{
background-color: #90A000;
}
.btn8{
background-color: #FFCC00;
border: 1px outset #F2FF00;
color: #FFF;
font-family:Helvetica;
font-weight:bold;
}
.btn8:hover{
background-color: #FF8000;
}
.btn9{
background-color: #C0107F;
border: 1px outset #70107F;
color: #FFF;
font-family:"Georgia";
font-weight:bold;
}
.btn9:hover{
background-color: #F0107F;
}

.btn10{
background-color: #20807F;
color: #FFF;
}
.btn10:hover{
background-color: #60807F;
}
.btn11{
background-color: #F07FD0;
color: #FFF;
font-style: italic;
letter-spacing:-1px;
text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4);
}
.btn11:hover{
background-color: #B07FA0;
}
.btn12{
background-color: #000;
color: #FFF;
letter-spacing:-1px;
text-shadow: 0 2px 1px rgba(0,0,0,0.2);
}
.btn12:hover{
background-color: #777;
}

.btn13{
background-color: #FFF090;
color: #fff;
letter-spacing: 3px;
text-shadow: 1px 0px 1px rgba(0,0,0,0.2);
}
.btn13:hover{
background-color: #F0C07F;
}

.btn14{
background-color: #9400D3;
color: #777;
font-family:"Arial Black";
text-shadow: 0px 1px 1px #fff;
}
.btn14:hover{
background-color: #8A2BE2;
}

.btn15{
background-color: #32CD32;
color: #fff;
font-family:"Century Gothic";
text-transform:uppercase;
font-style:italic;
text-shadow: 1px 0px 1px rgba(0,0,0,0.2);
}
.btn15:hover{
background-color: #2F4F4F;
}
.btn16{
background-color: #00008B;
color: #fff;
font-family:"Impact";
text-shadow: 1px 0px 1px rgba(0,0,0,0.2);
}
.btn16:hover{
background-color: #191970;
}
.btn17{
background-color: #FF6347;
color: #777;
font-family:"Palatino Linotype";
text-transform:uppercase;
text-shadow: 0px 1px 1px #fff;
}
.btn17:hover{
background-color: #FF7F50;
}
.btn18{
background-color: #D2691E;
color: #fff;
font-family:"Gill Sans";
text-shadow: 1px 0px 1px rgba(0,0,0,0.2);
}
.btn18:hover{
background-color: #D2B48C;
}
.btn19{
background-color: #5F9EA0;
color: #fff;
font-family: "Arial Narrow";
text-shadow: 1px 0px 1px rgba(0,0,0,0.2);
}
.btn19:hover{
background-color: #008080;
}
.btn20{
background-color: #00FFFF;
color: #fff;
font-family: "Tahoma";
text-shadow: 1px 1px 4px #000;
}
.btn20:hover{
background-color: #00FFCC;
}

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

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

.btn1{

background-color: #a3a3a3;

border: 2px solid #777;

color: #FFF;

font-weight:bold;

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

}

.btn2{

background: #666;

border: 2px solid #777;

color: #000;

text-shadow: 0px 1px 1px #fff;

font-weight: bold;

}

.btn3{

color: #fff;

background: #888;

border: 2px solid #777;

text-shadow: 1px 1px 6px #fff;

}

.btn4{

color: #fff;

background: #fff;

text-shadow: 1px 1px 4px #000;

border: 2px solid #f0f0f0;

font-family: "Arial";

font-weight:bold;

text-transform:uppercase;

letter-spacing:-1px;

}

.btn4:hover{

background-color:#f1f1f1;

}

.btn5{

background-color: #B00000;

border: 1px solid #7F0000;

color: #FFF;

text-shadow: 1px 1px 4px #000;

font-family: "Palatino Linotype";

}

.btn5:hover{

background-color:#800000;

}

.btn6{

background-color: #7FB0F0;

color: #FFF;

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

font-weight:100;

}

.btn6:hover{

background-color:#7FA0C0;

}

.btn7{

background-color: #B0E000;

border: 1px outset #D0E000;

color: #FFF;

font-style:italic;

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

}

.btn7:hover{

background-color: #90A000;

}

.btn8{

background-color: #FFCC00;

border: 1px outset #F2FF00;

color: #FFF;

font-family:Helvetica;

font-weight:bold;

}

.btn8:hover{

background-color: #FF8000;

}

.btn9{

background-color: #C0107F;

border: 1px outset #70107F;

color: #FFF;

font-family:"Georgia";

font-weight:bold;

}

.btn9:hover{

background-color: #F0107F;

}

.btn10{

background-color: #20807F;

color: #FFF;

}

.btn10:hover{

background-color: #60807F;

}

.btn11{

background-color: #F07FD0;

color: #FFF;

font-style: italic;

letter-spacing:-1px;

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

}

.btn11:hover{

background-color: #B07FA0;

}

.btn12{

background-color: #000;

color: #FFF;

letter-spacing:-1px;

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

}

.btn12:hover{

background-color: #777;

}

.btn13{

background-color: #FFF090;

color: #fff;

letter-spacing: 3px;

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

}

.btn13:hover{

background-color: #F0C07F;

}

.btn14{

background-color: #9400D3;

color: #777;

font-family:"Arial Black";

text-shadow: 0px 1px 1px #fff;

}

.btn14:hover{

background-color: #8A2BE2;

}

.btn15{

background-color: #32CD32;

color: #fff;

font-family:"Century Gothic";

text-transform:uppercase;

font-style:italic;

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

}

.btn15:hover{

background-color: #2F4F4F;

}

.btn16{

background-color: #00008B;

color: #fff;

font-family:"Impact";

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

}

.btn16:hover{

background-color: #191970;

}

.btn17{

background-color: #FF6347;

color: #777;

font-family:"Palatino Linotype";

text-transform:uppercase;

text-shadow: 0px 1px 1px #fff;

}

.btn17:hover{

background-color: #FF7F50;

}

.btn18{

background-color: #D2691E;

color: #fff;

font-family:"Gill Sans";

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

}

.btn18:hover{

background-color: #D2B48C;

}

.btn19{

background-color: #5F9EA0;

color: #fff;

font-family: "Arial Narrow";

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

}

.btn19:hover{

background-color: #008080;

}

.btn20{

background-color: #00FFFF;

color: #fff;

font-family: "Tahoma";

text-shadow: 1px 1px 4px #000;

}

.btn20:hover{

background-color: #00FFCC;

}

[divider]

Son olarak botunların arkasına gradient geçiş oluşturmak istenirse .button css kodunu aşağıdaki gibi yeniden düzenlemek gerekecektir.


.button{
padding:5px 15px 5px 15px;
text-decoration: none;
display: inline-block;
border-radius: 10px;
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
border-bottom: 1px solid rgba(0,0,0,0.25);
font-family: 'Open Sans', sans-serif;
outline:none;
position:relative;
font-size: 32px;
margin:10px;
white-space:nowrap;
/*dokulu arkaplanın oluşturulması gradient*/
background: rgba(76,76,76,1);
background: -moz-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(76,76,76,1)), color-stop(12%, rgba(89,89,89,1)), color-stop(91%, rgba(28,28,28,1)), color-stop(100%, rgba(19,19,19,1)));
background: -webkit-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%);
background: -o-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%);
background: -ms-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%);
background: linear-gradient(to bottom, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313', GradientType=0 ); 

}

.button{

padding:5px 15px 5px 15px;

text-decoration: none;

display: inline-block;

border-radius: 10px;

box-shadow: 0 1px 3px rgba(0,0,0,0.5);

border-bottom: 1px solid rgba(0,0,0,0.25);

font-family: 'Open Sans', sans-serif;

outline:none;

position:relative;

font-size: 32px;

margin:10px;

white-space:nowrap;

/*dokulu arkaplanın oluşturulması gradient*/

background: rgba(76,76,76,1);

background: -moz-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%);

background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(76,76,76,1)), color-stop(12%, rgba(89,89,89,1)), color-stop(91%, rgba(28,28,28,1)), color-stop(100%, rgba(19,19,19,1)));

background: -webkit-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%);

background: -o-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%);

background: -ms-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%);

background: linear-gradient(to bottom, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313', GradientType=0 );

}

Ekran görüntüsü aşağıdaki oluşacaktır.

İlgili

Yorum

CSS Buton Örnekleri | Yazılım Bilişim Programlama dedi ki:

Eylül 5, 2016, 12:44 pm

[…] Bu yazı da ilgilinizi çekebilir. […]

Cevapla
CSS ile Etiketleri Ovalleştirme (Border Radius) | Yazılım Bilişim Programlama dedi ki:

Ağustos 16, 2016, 5:44 am

[…] da ovallik değeri vererek eliptik nesneler oluşturmak mümkündür. border radius sıklıkla butonlarda kullanılmasına rağmen google+ hesaplarında dikkat etmişsinizdir. Resimlerin çerçevelerini […]

Cevapla

Adım 1: Head Etiketinin Oluşturulması

Adım 2: HTML Etiketlerinin Oluşturulması

Adım 3: Temel CSS Tanımlamaları

Adım 4: Butonları CSS Tanımlamaları

Bunu paylaş:

İlgili

İlginizi Çekebilir

Yorum

Yorum Yap X