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.
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>
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>
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;
}
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;
}
[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 );
}
Ekran görüntüsü aşağıdaki oluşacaktır.
