CSS Kullanarak Button Tasarlamak

Vatanay Özbeyli CSS3, Tasarım Unsurları

Web sayfalarında form objeleri dışında birçok türde buttonlar kullanılmakta. Bu dersimizde link, buttonlar,spanlar ve diğer tüm sınıflar için kullanılabilir kutular tasarlayacağız.

Ne yapacağımıza kısaca değinecek olursak ; ilk olarak basit bir taslak hazırlayacağız, sonrasında ise bu taslak üzerinden 5 adet örnek yapacağız.

ÖRNEĞİ GÖRÜNTÜLE

İlk örneğimizle başlayalım.

Başlangıç Örneği ~ Test Et


Öncelikle objemizi sitemize ekleyelim. Aşağıdaki kodlardan istediğinizi sitenizin <body></body> tagları arasına ekleyerek başlayalım.

<span class="ornek1">Button Örneği</span>

<input class="ornek1" type="submit" value="Button Örneği" />

Aşağıdaki kodları CSS dosyamıza ekliyoruz.

.ornek1{
background-color: #e9e9e9;
border-top: 1px #d4d4d4 solid;
border-left: 1px #d4d4d4 solid;
border-bottom: 1px #5e5e5e solid;
border-right: 1px #5e5e5e solid;
font:11px Arial, Helvetica, sans-serif;
color: #224059;
padding:6px;
cursor:pointer;
}

.ornek1:hover{
background-color: #d4d4d4;
border-top: 1px #5e5e5e solid;
border-left: 1px #5e5e5e solid;
border-bottom: 1px #d4d4d4 solid;
border-right: 1px #d4d4d4 solid;
color: #666;
}

 
 

2. Örnek ~ Test Et

Aşağıdaki kodlardan istediğinizi sitenizin <body></body> tagları arasına ekleyiniz.

<span class="ornek2">Button Örneği</span>

<input class="ornek2" type="submit" value="Button Örneği" />

Aşağıdaki kodları CSS dosyamıza ekliyoruz.

.ornek2{
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#a13e3e), to(#d87272));
background: -webkit-linear-gradient(top, #a13e3e, #d87272);
background: -moz-linear-gradient(top, #a13e3e, #d87272);
background: -ms-linear-gradient(top, #a13e3e, #d87272);
background: -o-linear-gradient(top, #a13e3e, #d87272);
border-top: 1px #7f2f2f solid;
border-left: 1px #7f2f2f solid;
border-bottom: 1px #611515 solid;
border-right: 1px #611515 solid;
font:12px Georgia, "Times New Roman", Times, serif;
color: white;
padding:10px;
cursor:pointer;
}

.ornek2:hover{
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d87272), to(#a13e3e));
background: -webkit-linear-gradient(top, #d87272, #a13e3e);
background: -moz-linear-gradient(top, #d87272, #a13e3e);
background: -ms-linear-gradient(top, #d87272, #a13e3e);
background: -o-linear-gradient(top, #d87272, #a13e3e);
border-top: 1px #611515 solid;
border-left: 1px #611515 solid;
border-bottom: 1px #7f2f2f solid;
border-right: 1px #7f2f2f solid;
color: #ffdada;
}

 
 

3. Örnek ~ Test Et

Aşağıdaki kodlardan istediğinizi sitenizin <body></body> tagları arasına ekleyiniz.

<span class="ornek3">Button Örneği</span>

<input class="ornek3" type="submit" value="Button Örneği" />

Aşağıdaki kodları CSS dosyamıza ekliyoruz.

.ornek3{
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e9e9e9), to(#d4d4d4));
background: -webkit-linear-gradient(top, #e9e9e9, #d4d4d4);
background: -moz-linear-gradient(top, #e9e9e9, #d4d4d4);
background: -ms-linear-gradient(top, #e9e9e9, #d4d4d4);
background: -o-linear-gradient(top, #e9e9e9, #d4d4d4);
border-top: 1px #c9c9c9 solid;
border-left: 1px #c9c9c9 solid;
border-bottom: 1px #5e5e5e solid;
border-right: 1px #5e5e5e solid;
font:bold 13px Arial, Helvetica, sans-serif;
color: #224059;
padding:15px;
cursor:pointer;
text-shadow: #CCC 2px 2px;
}

.ornek3:hover{
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d4d4d4), to(#e9e9e9));
background: -webkit-linear-gradient(top, #d4d4d4, #e9e9e9);
background: -moz-linear-gradient(top, #d4d4d4, #e9e9e9);
background: -ms-linear-gradient(top, #d4d4d4, #e9e9e9);
background: -o-linear-gradient(top, #d4d4d4, #e9e9e9);
border-top: 1px #5e5e5e solid;
border-left: 1px #5e5e5e solid;
border-bottom: 1px #c9c9c9 solid;
border-right: 1px #c9c9c9 solid;
color: #666;
}

 
 

Bu da ilginizi çekebilir  CSS ile Çoklu Arkaplan ve Animasyon

4. Örnek ~ Test Et

Aşağıdaki kodlardan istediğinizi sitenizin <body></body> tagları arasına ekleyiniz.

<span class="ornek4">Button Örneği</span>

<input class="ornek4" type="submit" value="Button Örneği" />

Aşağıdaki kodları CSS dosyamıza ekliyoruz.

.ornek4{
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#40c3e9), to(#2c93b0));
background: -webkit-linear-gradient(top, #40c3e9, #2c93b0);
background: -moz-linear-gradient(top, #40c3e9, #2c93b0);
background: -ms-linear-gradient(top, #40c3e9, #2c93b0);
background: -o-linear-gradient(top, #40c3e9, #2c93b0);
font:bold 13px Arial, Helvetica, sans-serif;
color: white;
padding:15px;
cursor:pointer;
border-radius:15px;
-webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
text-shadow: #2c93b0 2px 2px;
}

.ornek4:hover{
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2c93b0), to(#136880));
background: -webkit-linear-gradient(top, #2c93b0, #136880);
background: -moz-linear-gradient(top, #2c93b0, #136880);
background: -ms-linear-gradient(top, #2c93b0, #136880);
background: -o-linear-gradient(top, #2c93b0, #136880);
color: #61ceec;
}

 
 

5. Örnek ~ Test Et

Aşağıdaki kodlardan istediğinizi sitenizin <body></body> tagları arasına ekleyiniz.

<span class="ornek5">Button Örneği</span>

<input class="ornek5" type="submit" value="Button Örneği" />

Aşağıdaki kodları CSS dosyamıza ekliyoruz.

.ornek5{
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffdaf4), to(#e5a3d2));
background: -webkit-linear-gradient(top, #ffdaf4, #e5a3d2);
background: -moz-linear-gradient(top, #ffdaf4, #e5a3d2);
background: -ms-linear-gradient(top, #ffdaf4, #e5a3d2);
background: -o-linear-gradient(top, #ffdaf4, #e5a3d2);
font:bold 13px Arial, Helvetica, sans-serif;
color:white;
padding:5px 15px 5px 15px;
cursor:pointer;
border-radius:15px 0 15px 0;
-webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
text-shadow: #e5a3d2 1px 1px;
}

.ornek5:hover{
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e5a3d2), to(#c08bb0));
background: -webkit-linear-gradient(top, #e5a3d2, #c08bb0);
background: -moz-linear-gradient(top, #e5a3d2, #c08bb0);
background: -ms-linear-gradient(top, #e5a3d2, #c08bb0);
background: -o-linear-gradient(top, #e5a3d2, #c08bb0);
color: #ffd8f4;
}

 
 

6. Örnek ~ Test Et

Aşağıdaki kodlardan istediğinizi sitenizin <body></body> tagları arasına ekleyiniz.

<span class="ornek6">Button Örneği</span>

<input class="ornek6" type="submit" value="Button Örneği" />

Aşağıdaki kodları CSS dosyamıza ekliyoruz.

.ornek6{
letter-spacing:1px;
background:#717171;
font:11px Arial, Helvetica, sans-serif;
color:#e5e5e5;
padding:25px 15px 15px 15px;
border-bottom:5px #000 solid;
cursor:pointer;
text-shadow: #000 1px 1px;
}

.ornek6:hover{
background:#414141;
color: white;
}