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