CSS Kullanarak Button Tasarlamak

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  Formlarınızla Etkileşimli Dinamik Arkaplanlar

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;
}