×

Generator butoane CSS

Acest generator de marcaj CSS creaza codul personalizat pentru elementele buton

In partea stanga este afisat panoul de Setari in care poti alege diferite proprietati ce vor fi aplicate butonului

In partea dreapta este afisata caseta Arata buton si afiseaza vizual toate proprietatile aplicate butonului

In caseta Copie codul poti vedea marcajul CSS. Apasa pe Copie Codul ca sa selectezi tot marcajul CSS

Generator butoane CSS

Setari

+ Font / Text

Informatii

+ Box

+ Border

More

+ Background

+ Hover

Arata buton

Text buton

Exemplu marcaj HTML:

<a href="#" class="buton"> Text buton</a>

Copie codul
Copiat! 

.buton {
  background: #c77feb;
  background-image: -webkit-linear-gradient(top, #c77feb, #9153b0);
  background-image: -moz-linear-gradient(top, #c77feb, #9153b0);
  background-image: -ms-linear-gradient(top, #c77feb, #9153b0);
  background-image: -o-linear-gradient(top, #c77feb, #9153b0);
  background-image: linear-gradient(to bottom, #c77feb, #9153b0);
  -webkit-border-radius: ;
  -moz-border-radius: ;
  border-radius: ;
  font-family: Verdana;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.buton:hover {
  background: #ef87ff;
  background-image: -webkit-linear-gradient(top, #ef87ff, #c77feb);
  background-image: -moz-linear-gradient(top, #ef87ff, #c77feb);
  background-image: -ms-linear-gradient(top, #ef87ff, #c77feb);
  background-image: -o-linear-gradient(top, #ef87ff, #c77feb);
  background-image: linear-gradient(to bottom, #ef87ff, #c77feb);
  text-decoration: none;
}