Css ile Buton Oluşturmak

Web Sayfalarında kullanabileceğiniz "Css ile buton oluşturma kodları"... Görselliği artırılmış butonlar sayfalarınızı göze daha hoş, çekici gösterecek...



Demo:   Google   Bing

Kod Betiği:

.buton1 {
  background: #ffc000;
  background-image: -webkit-linear-gradient(top, #900C3F, #5F092A);
  background-image: -moz-linear-gradient(top, #900C3F, #5F092A);
  background-image: -ms-linear-gradient(top, #900C3F, #5F092A);
  background-image: -o-linear-gradient(top, #900C3F, #5F092A);
  background-image: linear-gradient(to bottom, #900C3F, #5F092A);
  -webkit-border-radius: 4;
  -moz-border-radius: 4;
  border-radius: 4px;
  font-family: Tahoma;
  color: #ffffff;
  font-size: 14px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.buton1:hover {
  color: #ffffff;
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #5F092A, #4A0620);
  background-image: -moz-linear-gradient(top, #5F092A, #4A0620);
  background-image: -ms-linear-gradient(top, #5F092A, #4A0620);
  background-image: -o-linear-gradient(top, #5F092A, #4A0620);
  background-image: linear-gradient(to bottom, #5F092A, #4A0620);
  text-decoration: none;
}

.buton2 {
  background: #ff8e42;
  background-image: -webkit-linear-gradient(top, #ff8e42, #ff6600);
  background-image: -moz-linear-gradient(top, #ff8e42, #ff6600);
  background-image: -ms-linear-gradient(top, #ff8e42, #ff6600);
  background-image: -o-linear-gradient(top, #ff8e42, #ff6600);
  background-image: linear-gradient(to bottom, #ff8e42, #ff6600);
  -webkit-border-radius: 4;
  -moz-border-radius: 4;
  border-radius: 4px;
  font-family: Tahoma;
  color: #ffffff;
  font-size: 14px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.buton2:hover {
  color: #ffffff;
  background: #ff7d26;
  background-image: -webkit-linear-gradient(top, #ff7d26, #ff8e42);
  background-image: -moz-linear-gradient(top, #ff7d26, #ff8e42);
  background-image: -ms-linear-gradient(top, #ff7d26, #ff8e42);
  background-image: -o-linear-gradient(top, #ff7d26, #ff8e42);
  background-image: linear-gradient(to bottom, #ff7d26, #ff8e42);
  text-decoration: none;
}

Butonunuzun görünmesini istediğiniz yere aşağıdaki kodlardan herhangi birini yapıştırmanız yeterli...

Buton 1:

<a class="buton1" href="https://www.google.com/" rel="noopener noreferrer" target="_blank" title="Google">Google</a>

Buton 2:

<a class="buton2" href="https://www.bing.com/" rel="noopener noreferrer" target="_blank" title="Bing">Bing</a>