Css İle Buton Yapma



css ile buton tasarla

Bir web sayfanız var ise biraz kodlama, biraz css ,biraz php derken kendinizi kodlamaların arasında bulursunuz ve artık işleriniz kolayca yürütmek için pek çok araca ihtiyaç duyarsınız örneğin bir buton yapma aracı gibi..

Web sayfanızda hazır tema kullansanız bile özel olarak pek çok isteğiniz olacak ve hiç bir tema sizin isteklerinizi karşılayamayacak ve ek özellik olarak temanıza sürekli bir şeyler eklemek isteyebilirsiniz. Örneğin  bir buton olabilir.

Web sayfanıza sosyal ağ butonu yada indirme butonu eklemek isteyebilirsiniz. Ve bu butonu tasarlamak için , photoshop vs gibi pek çok program kullanmaya ihtiyaç duymadan online olarak bir buton yapabilirsiniz. Yani kendiniz bir buton tasarlayabilirsiniz , hemde isteğinize göre.

Bugünkü konumuzda web sayfanız için tasarlayabileceğiniz , rengarenk ve şekil şekil butonları css ile tasarlayabilmeniz için linkler vereceğim.

Yapmanız gerekenler çok basit linkleri tıkladığınızda açılan sayfalarda

1- Buton ismini yazacaksınız.

2- Style css ‘e  atamanız gereken class ismini yazacaksınız.

3- Sonra tasarım için buton ayarlarına geçeceksiniz, büyüklük, küçüklük, oval, dikdörtgen seçimlerini skalaları haraket ettirerek tasarlayacaksınız.

Tüm düzenlemeleriniz bittiğinde size style css ‘e eklemeniz gereken kodlar verilecek ve bu kodları  kopyalayıp style.css dosyanıza yapıştıracaksınız.

Bunun yanında birde  html kodu veriliyor.  Bu html kodunuda butonun görünmesini istediğimiz yere ekliyoruz. HTML kodunun içindeki a href ‘den sonra gelen çift tırnak arasındaki karenin olduğu kısma linki eklememiz ile  buton tıklanabilir olacaktır.

css ile buton yap

HTMl kodu

Style.css’e eklenecek olan kod örneği

Online olarak buton yapabileceğiniz linkler

http://css3buttongenerator.com/

https://dabuttonfactory.com/

http://www.bestcssbuttongenerator.com/

http://www.cssportal.com/css3-button-generator/

http://buttonoptimizer.com/

https://cssgradientbutton.com/

http://cssbuttoncreator.com/

HTML ‘e ekleyeceğiniz benzer kod örneği:

<a href="#" class="teknohaber"></a> 

style css’e ekleyeceğiniz benzer kod örneği:

.teknohaber {
   background: #F6F6F6;
   background-image: -webkit-linear-gradient(top, #F6F6F6, #1E62D0);
   background-image: -moz-linear-gradient(top, #F6F6F6, #1E62D0);
   background-image: -ms-linear-gradient(top, #F6F6F6, #1E62D0);
   background-image: -o-linear-gradient(top, #F6F6F6, #1E62D0);
   background-image: linear-gradient(to bottom, #F6F6F6, #1E62D0);
   -webkit-border-radius: 0px;
   -moz-border-radius: 0px;
   border-radius: 0px;
   height: 50px;
   line-height: 50px;
   color: #000000;
   font-family: Arial;
   width: 200px;
   font-size: 43px;
   font-weight: 100;
   padding: 0px;
   box-shadow: -1px 0px 16px 0px #FFFFFF;
   -webkit-box-shadow: -1px 0px 16px 0px #FFFFFF;
   -moz-box-shadow: -1px 0px 16px 0px #FFFFFF;
   text-shadow: 1px 1px 20px #FFFFFF;
   border: solid #99C624 1px;
   text-decoration: none;
   display: inline-block;
   cursor: pointer;
}

.teknohaber:hover {
   background: #87D091;
   text-decoration: none;
}
Css İle Temadaki Resimleri Düzenleme
CSS Ve JS Dosyaları Nasıl Bileştirilir?



2 Yorum

  1. ferda turhan 16 Ocak 2017 Alıntıla
    • Nimet Tuba ÖzYönetici 16 Ocak 2017 Alıntıla

    Yorum Bırakabilirsiniz

    E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir