Una raccolta di bottoni in CSS pronti all'uso per tutti i gusti.

Bottoni vengono creati in HTML con aiuto del tag <a>, tag <span> o <div> e con aiuto di CSS si possa modifficare il loro aspetto visivo creando dei meravigliosi bottoni per ogni genere di situazioni. In questo articolo vediamo bottoni gia realizzati con rispettivi codici HTML e stili CSS.

Come creare un semplice bottone in HTML e CSS

<a href="#" class="bottone">bottone</a>
<style>
a.bottone {
  color: #fff; /* colore del testo */
  text-decoration: none; /* eliminare la sottolineatura del testo */
  background: rgb(212,75,56); /* sfondo del bottone */
  padding: .7em 1.5em; /* padding dal testo dal bordo del bottone */
  outline: none; /*  eliminare bordo*/
} 
a.bottone:hover { background: rgb(232,95,76); } /* cambio dello sfondo al passagio del mouse */
a.bottone:active { background: rgb(152,15,0); } /* cambiare lo sfondo al premere bottone   */
 
</style>

Bottone esempio

 

Il nostro bottone in una  pagina web puo avere 4 stati diversi e cambiare il suo aspetto a seconda dello stato in quale si trova. Quindi se vorresti che il tuo bottone suggerisce al utente il suo stato, per esempio che esso è stato gia cliccato o è stato premuto o semplicemente si trova sotto il puntatore del mouse, potresti sempre indicare questi situazioni attraverso pseudo-classi. Come:

: hover - quando si passa sopra. Per questo stato a parte di cambiare colore di sfondo è sempre opportuno indicare anche cambiamento del aspetto del puntatore da freccia a mano per indicare al utente che questo elemento puo essere cliccato.

 : active - quando si preme il pulsante.

: focus - mentre il pulsante è stato gia premuto con il tasto destro  del mous ma non è ancora cliccato. Con questo stato si possono combinare varie proprieta di CSS come  visibility: hidden; e varie effetti in base di transizioni.

 

Semplice bottone

Nel esempio qui sotto poi cambiare qualsiasi proprietà dei CSS direttamente qui sulla pagina inserendo il tuo valore  e vedrai come si cambierà "Bottone semplice". Prova per esempio modificare il colore di sfondo o arrotondare. Ho fatto questo esempio con lo scopo di mostrare che cosi potrai cambiare anche gli altri bottoni che vedi qua sulla pagina al proprio gusto. Copiando prima il codice del bottone in tua pagina e dopo adattarlo al design del tuo sito web.

 

Bottone semplice

 

Stili CSS del bottone

<style>
a.button8 {
  display: inline-block;
  color: white;
  font-weight: 700;
  text-decoration: none;
  user-select: none;
  padding: .5em 2em;
  outline: none;
  border: 2px solid;
  border-radius: 1px;
  transition: 0.2s;
} 
a.button8:hover { background: rgba(255,255,255,.2); }
a.button8:active { background: white; }
</style>

 

Buttone 24

Stili CSS del bottone

<style>
a.button24 {
  display: inline-block;
  color: white;
  text-decoration: none;
  padding: .5em 2em;
  outline: none;
  border-width: 2px 0;
  border-style: solid none;
  border-color: #FDBE33 #000 #D77206;
  border-radius: 6px;
  background: linear-gradient(#F3AE0F, #E38916) #E38916;
  transition: 0.2s;
} 
a.button24:hover { background: linear-gradient(#f5ae00, #f59500) #f5ae00; }
a.button24:active { background: linear-gradient(#f59500, #f5ae00) #f59500; }
</style>

Bottoni con gradiente

Buttone 10

 

Stili CSS del bottone

<style>
a.button10 {
  display: inline-block;
  color: black;
  font-size: 125%;
  font-weight: 700;
  text-decoration: none;
  user-select: none;
  padding: .25em .5em;
  outline: none;
  border: 1px solid rgb(250,172,17);
  border-radius: 7px;
  background: rgb(255,212,3) linear-gradient(rgb(255,212,3), rgb(248,157,23));
  box-shadow: inset 0 -2px 1px rgba(0,0,0,0), inset 0 1px 2px rgba(0,0,0,0), inset 0 0 0 60px rgba(255,255,0,0);
  transition: box-shadow .2s, border-color .2s;
} 
a.button10:hover {
  box-shadow: inset 0 -1px 1px rgba(0,0,0,0), inset 0 1px 2px rgba(0,0,0,0), inset 0 0 0 60px rgba(255,255,0,.5);
}
a.button10:active {
  padding: calc(.25em + 1px) .5em calc(.25em - 1px);
  border-color: rgba(177,159,0,1);
  box-shadow: inset 0 -1px 1px rgba(0,0,0,.1), inset 0 1px 2px rgba(0,0,0,.3), inset 0 0 0 60px rgba(255,255,0,.45);
}
</style>

Cliccare per scaricare

Stili CSS del bottone

<style>a.button12 {
  position: relative;
  display: inline-block;
  font-size: 100%;
  font-weight: 700;
  color: #fff;
  text-shadow: #053852 -1px 1px, #053852 1px 1px, #053852 1px -1px, #053852 -1px -1px;
  text-decoration: none;
  user-select: none;
  padding: .3em .7em;
  outline: none;
  border-radius: 7px;
  background: #053852 repeating-linear-gradient(135deg, #053852, #053852 10px, #1679ad 10px, #1679ad 20px, #053852 20px);
  box-shadow:
   inset -2px -2px rgba(0,0,0,.3),
   inset 2px 2px rgba(255,255,255,.3);
  transition: background-position 999999s, color 999999s, text-shadow 999999s;
}
a.button12:hover, a.button12:focus {
  text-shadow: #0175b1 -1px 1px, #0175b1 1px 1px, #0175b1 1px -1px, #0175b1 -1px -1px;
  background: #0175b1 repeating-linear-gradient(135deg, #0175b1, #0175b1 10px, #8fd2f5 10px, #8fd2f5 20px, #0175b1 20px) no-repeat;
  background-size: 1000% 100%;
}
a.button12:hover {
  background-position: 0 0;
}
a.button12:focus {
  color: rgba(255,255,255,0);
  text-shadow: rgba(1,117,177,0) -1px 1px, rgba(1,117,177,0) 1px 1px, rgba(1,117,177,0) 1px -1px, rgba(1,117,177,0) -1px -1px;
  background-position: 900% 0;
  transition: background-position linear 600s, color .5s, text-shadow .5s;
}
a.button12:after {
  content: "Caricamento\2026";
  position: absolute;
  top: 0;
  left: 0;
  padding: .3em .7em;
  color: rgba(0,0,0,0);
  text-shadow: none;
  transition: 999999s;
}
a.button12:focus:after {
  color: #fff;
  text-shadow: #0175b1 -1px 1px, #0175b1 1px 1px, #0175b1 1px -1px, #0175b1 -1px -1px;
  transition: .5s;
}
</style>

Buttone 25

Stili CSS del bottone

<style>
a.button25 {
  position: relative;
  display: inline-block;
  width: 10em;
  height: 2.5em;
  line-height: 2.5em;
  vertical-align: middle;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 -1px 1px #777;
  color: #fff;
  outline: none;
  border: 2px solid #F64C2B;
  border-radius: 5px;
  box-shadow: 0 0 0 60px rgba(0,0,0,0) inset, .1em .1em .2em #800;
  background: linear-gradient(#FB9575, #F45A38 48%, #EA1502 52%, #F02F17);
}
a.button25:active {
  top: .1em;
  left: .1em;
  box-shadow: 0 0 0 60px rgba(0,0,0,.05) inset;
}
</style>

Belli bottoni in CSS.

200 Euro

Stili CSS del bottone

a.button11 {
  position: relative;
  z-index: 1;
  color: black;
  font-size: 135%;
  font-weight: 700;
  text-decoration: none;
  padding: .25em .5em;
}
a.button11:after {
  content: "Comprare";  /* qui ci sono 8 lettere */
  position: absolute;
  z-index: -1;
  top: -2px;
  bottom: -2px;
  left: -2px;
  width: calc(100% + 8*(1em*90/135) - 2px*2*2);  /* dove 8*(1em*90/135), dove 8 – sono le 8 lettere, 90 è font-size after, e 135 è  font-size del genitore */
  text-align: right;
  color: #fff;
  font-size: 90%;
  padding: .25em .5em;
  border-radius: 5px;
  border: 2px solid #c61e40;
  -webkit-transform: skewX(-10deg);
  transform: skewX(-10deg);
  background: linear-gradient(#d4536d, #c61e40) no-repeat 100% 0;
  background-size: calc(8*(1em*90/135) + .5em) 100%;
  box-shadow: inset calc(-8*(1em*90/135) - .5em) 0 rgba(255,255,255,0);
  transition: .3s;
}
a.button11:hover:after {
  box-shadow: inset calc(-8*(1em*90/135) - .5em) 0 rgba(255,255,255,.2);
}
a.button11:active:after {  background-image: linear-gradient(#c61e40, #d4536d);
}
</style>

Bottone 15

Stili CSS del bottone

<style>
a.button15 {
  display: inline-block;
  font-family: arial,sans-serif;
  font-size: 11px;
  font-weight: bold;
  color: rgb(68,68,68);
  text-decoration: none;
  user-select: none;
  padding: .2em 1.2em;
  outline: none;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 2px;
  background: rgb(245,245,245) linear-gradient(#f4f4f4, #f1f1f1);
  transition: all .218s ease 0s;
}
a.button15:hover {
  color: rgb(24,24,24);
  border: 1px solid rgb(198,198,198);
  background: #f7f7f7 linear-gradient(#f7f7f7, #f1f1f1);
  box-shadow: 0 1px 2px rgba(0,0,0,.1);
}
a.button15:active {
  color: rgb(51,51,51);
  border: 1px solid rgb(204,204,204);
  background: rgb(238,238,238) linear-gradient(rgb(238,238,238), rgb(224,224,224));
  box-shadow: 0 1px 2px rgba(0,0,0,.1) inset;
}
</style>

Bottone 17

Stili CSS del bottone

<style>
a.button17 {
  display: inline-block;
  font-family: arial,sans-serif;
  font-size: 11px;
  color: rgb(205,216,228);
  text-shadow: 0 -1px rgb(46,53,58);
  text-decoration: none;
  user-select: none;
  line-height: 2em;
  padding: 1px 1.2em;
  outline: none;
  border: 1px solid rgba(33,43,52,1);
  border-radius: 3px;
  background: rgb(81,92,102) linear-gradient(rgb(81,92,102), rgb(69,78,87));
  box-shadow:
   inset 0 1px rgba(101,114,126,1),
   inset 0 0 1px rgba(140,150,170,.8),
   0 1px rgb(83,94,104),
   0 0 1px rgb(86,96,106);
}
a.button17:active {
  box-shadow:
   inset 0 1px 3px rgba(0,10,20,.5),
   0 1px rgb(83,94,104),
   0 0 1px rgb(86,96,106);
}
a.button17:focus:not(:active) {
  border: 1px solid rgb(22,32,43);
  border-bottom: 1px solid rgb(25,34,45);
  background: rgb(53,61,71);
  box-shadow:
   inset 0 1px 3px rgba(0,10,20,.5),
   0 1px rgb(83,94,104),
   0 0 1px rgb(86,96,106);
  pointer-events: none;
}
</style>

Bottone 21

Stili CSS del bottone

<style>
a.button21 {
  display: inline-block;
  width: 5em;
  height: 2em;
  line-height: 2em;
  vertical-align: middle;
  text-align: center;
  text-decoration: none;
  user-select: none;
  color: rgb(0,0,0);
  outline: none;
  border: 1px solid rgba(0,0,0,.4);
  border-top-color: rgba(0,0,0,.3);
  border-radius: 2px;
  background: linear-gradient(rgb(255,255,255), rgb(240,240,240));
  box-shadow:
   0 0 3px rgba(0,0,0,0) inset,
   0 1px 1px 1px rgba(255,255,255,.2),
   0 -1px 1px 1px rgba(0,0,0,0);
  transition: .2s ease-in-out;
}
a.button21:hover:not(:active) {
  box-shadow:
   0 0 3px rgba(0,0,0,0) inset,
   0 1px 1px 1px rgba(0,255,255,.5),
   0 -1px 1px 1px rgba(0,255,255,.5);
}
a.button21:active {
  background: linear-gradient(rgb(250,250,250), rgb(235,235,235));
  box-shadow:
   0 0 3px rgba(0,0,0,.5) inset,
   0 1px 1px 1px rgba(255,255,255,.4),
   0 -1px 1px 1px rgba(0,0,0,.1);
}
</style>

Bottone28

Stili CSS del bottone

<style>
a.button28 {
  position: relative;
  display: inline-block;
  font-size: 90%;
  font-weight: 700;
  color: rgb(209,209,217);
  text-decoration: none;
  text-shadow: 0 -1px 2px rgba(0,0,0,.2);
  padding: .5em 1em;
  outline: none;
  border-radius: 3px;
  background: linear-gradient(rgb(110,112,120), rgb(81,81,86)) rgb(110,112,120);
  box-shadow:
   0 1px rgba(255,255,255,.2) inset,
   0 3px 5px rgba(0,1,6,.5),
   0 0 1px 1px rgba(0,1,6,.2);
  transition: .2s ease-in-out;
}
a.button28:hover:not(:active) {
  background: linear-gradient(rgb(126,126,134), rgb(70,71,76)) rgb(126,126,134);
}
a.button28:active {
  top: 1px;
  background: linear-gradient(rgb(76,77,82), rgb(56,57,62)) rgb(76,77,82);
  box-shadow:
   0 0 1px rgba(0,0,0,.5) inset,
   0 2px 3px rgba(0,0,0,.5) inset,
   0 1px 1px rgba(255,255,255,.1);
}
</style>
[/spolier]

Pulsanti CSS «Download»

Scaricare versione di prova

Stili CSS del bottone

<style>
a.button13 {
  display: inline-block;
  width: 15em;
  font-size: 80%;
  color: rgba(255,255,255,.9);
  text-shadow: #2e7ebd 0 1px 2px;
  text-decoration: none;
  text-align: center;
  line-height: 1.1;
  white-space: pre-line;
  padding: .7em 0;
  border: 1px solid;
  border-color: #60a3d8 #2970a9 #2970a9 #60a3d8;
  border-radius: 6px;
  outline: none;
  background: #60a3d8 linear-gradient(#89bbe2, #60a3d8 50%, #378bce);
  box-shadow: inset rgba(255,255,255,.5) 1px 1px;
}
a.button13:first-line{
  font-size: 170%;
  font-weight: 700;
}
a.button13:hover {
  color: rgb(255,255,255);
  background-image: linear-gradient(#9dc7e7, #74afdd 50%, #378bce);
}
a.button13:active {
  color: rgb(255,255,255);
  border-color: #2970a9;
  background-image: linear-gradient(#5796c8, #6aa2ce);
  box-shadow: none;
}
</style>

Scarica

Stili CSS del bottone

<style>
/* bel effetto di un bottone che si infiamma  */
a.button14 {
  display: inline-block;
  text-shadow: 1px 1px #fff;
  text-decoration: none;
  padding: .3em 1em;
  border: 1px solid #aaa;
  border-radius: 100px;
  outline: none;
  background: #d6dbbf no-repeat;
  background-image:
   linear-gradient(to left, #aaa, #aaa),
   linear-gradient(to left, #feffe8, #feffe8),
   linear-gradient(#feffe8, #d6dbbf);
  background-position: calc(100% - 2.7em) 0, calc(100% - 2.7em + 1px) 0, 0 0;
  background-size: 1px 100%, 1px 100%, auto auto;
  overflow: hidden;
}
a.button14:after {
  content: "\bb";
  position: relative;
  bottom: 0;
  display: inline-block;
  margin-left: 1.4em;
  vertical-align: middle;
  font-family: "Times","Times New Roman","serif","sans-serif","EmojiSymbols";
  font-weight: 700;
  font-size: 140%;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
a.button14:hover {
  background-color: #fdfd9f;
  background-image:
   linear-gradient(to left, #aaa, #aaa),
   linear-gradient(to left, #feffe8, #feffe8),
   linear-gradient(#fffce7, #fdfd9f);
}
a.button14:active:after {
  bottom: -1.2em;
  transition: .3s;
}
</style>

Bottoni animati coi CSS.

Stili CSS del bottone

<style>
input.button4 {
  position: relative;
  display: inline-block;
  font-family: Arial,Helvetica,FreeSans,"Liberation Sans","Nimbus Sans L",sans-serif;
  font-size: 1.5em;
  font-weight: 700;
  color: rgb(245,245,245);
  text-shadow: 0 -1px rgba(0,0,0,.1);
  text-decoration: none;
  user-select: none;
  padding: .3em 1em;
  outline: none;
  border: none;
  border-radius: 3px;
  background: #0c9c0d linear-gradient(#82d18d, #0c9c0d);
  box-shadow: inset #72de26 0 -1px 1px, inset 0 1px 1px #98ff98, #3caa3c 0 0 0 1px, rgba(0,0,0,.3) 0 2px 5px;
  -webkit-animation: pulsate 1.2s linear infinite;
  animation: pulsate 1.2s linear infinite;
}
input.button4:hover {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
  cursor: pointer;
}
input.button4:active {
  top: 1px;
  color: #fff;
  text-shadow: 0 -1px rgba(0,0,0,.3), 0 0 5px #ffd, 0 0 8px #fff;
  box-shadow: 0 -1px 3px rgba(0,0,0,.3), 0 1px 1px #fff, inset 0 1px 2px rgba(0,0,0,.8), inset 0 -1px 0 rgba(0,0,0,.05);
}
@-webkit-keyframes pulsate {
  50% {color: #fff; text-shadow: 0 -1px rgba(0,0,0,.3), 0 0 5px #ffd, 0 0 8px #fff;}
}
@keyframes pulsate {
  50% {color: #fff; text-shadow: 0 -1px rgba(0,0,0,.3), 0 0 5px #ffd, 0 0 8px #fff;}
}
</style>

Stili CSS del bottone

style>
.bot01 {
  display: inline-block;
  width: 100px;
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px rgba(255,255,255,.2), 0 -1px rgba(0,0,0,.8);
  outline: none;
  border: none;
  border-radius: 100px;
  background: rgb(28,107,114) radial-gradient(150% 100% at 50% 5px, rgba(255,255,255,.2), rgba(0,0,0,0));
  box-shadow: inset rgba(0,0,0,.6) 0 -2px 5px, inset rgba(252,255,255,.7) 0 2px 5px, rgba(0,0,0,.8) 0 2px 5px -1px;
  color: rgb(0,79,86);
  user-select: none;
} 
.bot01:hover {
  color: rgb(0,59,66);
  cursor: pointer;
}
.bot01:active {
  padding-bottom: 1px;
  box-shadow:
   inset rgba(0,0,0,1) 0 1px 3px,
   inset rgba(0,0,0,.6) 0 -2px 5px,
   inset rgba(252,255,255,.7) 0 2px 5px,
   0 1px rgba(255,255,255,.08);
  color: rgb(128,207,214);
}
</style>

Bottone 1

Stili CSS del bottone

<style>
a.button1 {
  position: relative;
  color: white;
  font-weight: bold;
  text-decoration: none;
  text-shadow: -1px -1px #000;
  user-select: none;
  padding: .8em 2em;
  outline: none;
  background-color: #000;
  background-image: linear-gradient(45deg, rgba(255,255,255,.0) 30%, rgba(255,255,255,.8), rgba(255,255,255,.0) 70%), radial-gradient(190% 100% at 50% 0%, rgba(255,255,255,.7) 0%, rgba(255,255,255,.5) 50%, rgba(0,0,0,0) 50%);
  background-repeat: no-repeat;
  background-size: 200% 100%, auto;
  background-position: 200% 0, 0 0;
  box-shadow: rgba(0,0,0,.3) 0 2px 5px;
} 
a.button1:active {
  top: 1px;
  box-shadow: none;
}
a.button1:hover {
  transition: .5s linear;
  background-position: -200% 0, 0 0;
}
</style>

Stili CSS del bottone

<style>
a.button9 {
  position: relative;
  display: inline-block;
  color: #777674;
  font-weight: bold;
  text-decoration: none;
  text-shadow: rgba(255,255,255,.5) 1px 1px, rgba(100,100,100,.3) 3px 7px 3px;
  user-select: none;
  padding: 1em 2em;
  outline: none;
  border-radius: 3px / 100%;
  background-image:
   linear-gradient(45deg, rgba(255,255,255,.0) 30%, rgba(255,255,255,.8), rgba(255,255,255,.0) 70%),
   linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 90%, rgba(255,255,255,.3)),
   linear-gradient(to right, rgba(125,125,125,1), rgba(255,255,255,.9) 45%, rgba(125,125,125,.5)),
   linear-gradient(to right, rgba(125,125,125,1), rgba(255,255,255,.9) 45%, rgba(125,125,125,.5)),
   linear-gradient(to right, rgba(223,190,170,1), rgba(255,255,255,.9) 45%, rgba(223,190,170,.5)),
   linear-gradient(to right, rgba(223,190,170,1), rgba(255,255,255,.9) 45%, rgba(223,190,170,.5));
  background-repeat: no-repeat;
  background-size: 200% 100%, auto, 100% 2px, 100% 2px, 100% 1px, 100% 1px;
  background-position: 200% 0, 0 0, 0 0, 0 100%, 0 4px, 0 calc(100% - 4px);
  box-shadow: rgba(0,0,0,.5) 3px 10px 10px -10px;
}
a.button9:hover {
  transition: .5s linear;
  background-position: -200% 0, 0 0, 0 0, 0 100%, 0 4px, 0 calc(100% - 4px);
}
a.button9:active {
  top: 1px;
}
</style>

Bottone

Stili CSS del bottone

<style>
a.button6 {
  position: relative;
  font-weight: bold;
  color: white;
  text-decoration: none;
  text-shadow: 0 -1px 1px #cc5500;
  user-select: none;
  padding: .8em 2em;
  outline: none;
  border-radius: 1px;
  background: linear-gradient(to left, rgba(0,0,0,.3), rgba(0,0,0,.0) 50%, rgba(0,0,0,.3)), linear-gradient(#d77d31, #fe8417, #d77d31);
  background-size: 100% 100%, auto;
  background-position: 50% 50%;
  box-shadow: inset #ebab00 0 -1px 1px, inset 0 1px 1px #ffbf00, #cc7722 0 0 0 1px, #000 0 10px 15px -10px;
  transition: 0.2s;
}
a.button6:hover {
  background-size: 140% 100%, auto;
}
a.button6:active {
  top: 1px;
  color: #ffdead;
  box-shadow: inset #ebab00 0 -1px 1px, inset 0 1px 1px #ffbf00, #cc7722 0 0 0 1px, 0 10px 10px -9px #000;
}
</style>

Spoiler Title

Voci  di  menu

 

Stili CSS del bottone

<style>
a.button5 {
  display: inline-block;
  color: #000;
  font-size: 12px;
  text-decoration: none;
  user-select: none;
  padding: 0 5px;
  outline: none;
  border-radius: 2px;
}
a.button5:before {
  display: inline-block;
  vertical-align: middle;
  line-height: 1;  /* per immagini grandi 0 */
  padding-right: 5px;
}
a.button5[data-twitter]:before {content: url(http://favicon.yandex.net/favicon/twitter.com);}
a.button5[data-vk]:before {content: url(http://favicon.yandex.net/favicon/vk.com);}
a.button5[data-facebook]:before {content: url(http://favicon.yandex.net/favicon/facebook.com);}
a.button5:hover {
  background: linear-gradient(#ececeb, #eaeaea);
  box-shadow:
   inset rgba(0,0,0,.5) 0 -1px 1px,
   inset rgba(0,0,0,.2) 0 1px,
   inset #fff 0 2px,
   rgba(0,0,0,.2) 0 1px 1px;
}
a.button5:active {
  background: linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.1));
  box-shadow:
   inset rgba(0,0,0,.8) 0 1px 2px,
   inset rgba(0,0,0,.05) 0 -1px 0,
   #fff 0 1px 1px;
}
</style>

Stili CSS del bottone

<style>
 display: inline-block;
  text-decoration: none;
  padding: 1em;
  outline: none;
  border-radius: 1px;
}
a.button16:hover {
  background-image:
   radial-gradient(1px 45% at 0% 50%, rgba(0,0,0,.6), transparent),
   radial-gradient(1px 45% at 100% 50%, rgba(0,0,0,.6), transparent); 
}
a.button16:active {
  background-image:
   radial-gradient(45% 45% at 50% 100%, rgba(255,255,255,.9), rgba(255,255,255,0)),
   linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,.3));
  box-shadow:
   inset rgba(162,95,42,.4) 0 0 0 1px,
   inset rgba(255,255,255,.9) 0 0 1px 3px;
}
</style>

Bottone 18

Stili CSS del bottone

<style>
a.button18 {
  display: inline-block;
  font-size: 12px;
  color: rgb(205,216,228);
  text-decoration: none;
  padding: .2em .8em;
  outline: none;
  border-right: 1px solid rgba(13,20,27,.5);
  border-top: 1px solid rgba(270,278,287,.01);
  background-color: rgb(64,73,82);
  background-image:
   radial-gradient(1px 60% at 0% 50%, rgba(255,255,255,.3), transparent),
   radial-gradient(1px 60% at 100% 50%, rgba(255,255,255,.3), transparent),
   linear-gradient(rgb(64,73,82), rgb(72,81,90));
}
a.button18:hover {
  background-image:
   radial-gradient(1px 60% at 0% 50%, rgba(255,255,255,.3), transparent),
   radial-gradient(1px 60% at 100% 50%, rgba(255,255,255,.3), transparent),
   linear-gradient(rgb(51,60,67), rgb(58,65,72));
}
a.button18:focus {
  color: rgb(245,247,250);
  border-top: 1px solid rgb(67,111,136);
  background-image:
   linear-gradient(rgb(46,95,122), rgb(36,68,92));
}
a.button18:focus:hover {
  border-top: 1px solid rgb(49,87,107);
  background-image:
   linear-gradient(rgb(33,77,98), rgb(29,57,77));
}
</style>
1 2 3

 

Stili CSS del bottone

<style>
a.button27 {
  position: relative;
  display: inline-block;
  width: 2em;
  height: 2em;
  line-height: 2em;
  vertical-align: middle;
  text-align: center;
  text-decoration: none;
  color: #000;
  outline: none;
  border-radius: 5px;
  box-shadow: 0 0 0 1px #ddd inset, 0 1px 1px #fff;
}
a.button27:hover {
  background: #dcdcdc linear-gradient(#fff, #dcdcdc);
  box-shadow: 0 0 0 1px #aaa inset, 0 1px 1px #aaa;
}
a.button27:active {
  background: none;
    box-shadow: 0 0 0 1px #bbb inset, 0 1px 3px rgba(0,0,0,.5) inset, 0 1px 2px #fff;
}
</style>

Pulsante voluminoso

Voluminoso 19

Stili CSS del bottone

<style>
a.button19 {
  display: inline-block;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
  text-shadow: 0 -1px rgba(0,0,0,.5);
  user-select: none;
  padding: .7em 1.5em;
  border: 1px solid rgb(80,32,0);
  border-radius: 5px;
  outline: none;
  background: rgb(147,80,36) linear-gradient(rgb(106,58,26), rgb(147,80,36) 80%);
  box-shadow:
   0 6px rgb(86,38,6),
   0 3px 15px rgba(0,0,0,.4),
   inset 0 1px rgba(255,255,255,.3),
   inset 0 0 3px rgba(255,255,255,.5);
  transition: .2s;
} 
.button19:hover {
  background: rgb(167,91,41) linear-gradient(rgb(126,69,31), rgb(167,91,41) 80%);
}
.button19:active {
  background: rgb(120,63,25) linear-gradient(rgb(120,63,25) 20%, rgb(167,91,41));
  box-shadow:
   0 2px rgb(86,38,6),
   0 1px 6px rgba(0,0,0,.4),
   inset 0 1px rgba(255,255,255,.3),
   inset 0 0 3px rgba(255,255,255,.5);
  -webkit-transform: translate(0, 4px);
  transform: translate(0, 4px);
}
</style>

Bottone

Stili CSS del bottone

<style>
a.button {
  position: relative;
  display: inline-block;
  font-size: 24px;
  font-weight: bold;
  color: hsl(88, 70%, 30%);
  text-shadow: rgba(255,255,255,.5) 0 -1px 0, rgba(0,0,0,.2) 0 .18em .15em;
  text-decoration: none;
  user-select: none;
  margin: .5em;
  padding: .5em .6em .4em .6em;
  border-radius: 8px;
  border-top: 1px solid rgba(255,255,255,.1);
  border-bottom: 1px solid rgba(0,0,0,.1);
  outline: none;
  background: #a2cf70 radial-gradient(rgba(255,255,255,0), rgba(255,255,255,.5));
  box-shadow:
   inset rgba(255,255,255,.6) 0 .3em .3em,
   inset rgba(0,0,0,.2) 0 -.1em .3em,
   rgb(128,161,103) 0 7px 1px,
   rgba(0,0,0,.2) 0 .5em 5px;
  transition: background .2s ease-in-out;
}
a.button:hover {
  background-color: hsl(88, 70%, 75%);
}
a.button:active {
  top: .2em;
  color: rgba(254,255,255,.9);
  text-shadow: rgba(0,0,0,.2) 0 1px 2px;
  box-shadow:
   inset rgba(255,255,255,.6) 0 .3em .3em,
   inset rgba(0,0,0,.2) 0 -.1em .3em,
   rgba(0,0,0,.4) 0 .1em 1px,
   rgba(0,0,0,.3) 0 .2em 6px;
}
a.button:after {
  content:  "";
  position:  absolute; 
  width:   90%;
  height:  60%;
  top:   0;
  left:   5%;    
  border-radius:    .5em .5em 1em 1em / .5em .5em 2em 2em;
  background-image: linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.3)); 
}
.button:active:after {
  opacity: .6;
}
</style>

Voluminoso 20

Stili CSS del bottone

<style>
a.button20 {
  position: relative;
  display: inline-block;
  font-weight: bold;
  color: #000;
  text-decoration: none;
  text-shadow: -2px 2px rgba(255,255,255,.3);
  line-height: 1.1;
  padding: .5em 3em .5em .6em;
  background: linear-gradient(#ecc92b, #fce25b);
  box-shadow:
   0 0 0 1px #fce25b inset,
   -1px 0px rgb(220,195,35), -1px 1px rgb(192,167,7),
   -2px 1px rgb(219,194,34), -2px 2px rgb(191,166,6),
   -3px 2px rgb(218,193,33), -3px 3px rgb(190,165,5),
   -4px 3px rgb(217,192,32), -4px 4px rgb(189,164,4),
   -5px 4px rgb(216,191,31), -5px 5px rgb(188,163,3),
   -6px 5px rgb(215,190,30), -6px 6px rgb(187,162,2),
   -7px 6px rgb(214,189,29), -7px 7px rgb(186,161,1),
   -8px 7px rgb(213,188,28), -8px 8px rgb(185,160,0),
   -7px 9px 1px rgba(0,0,0,.4),
   -5px 11px 1px rgba(0,0,0,.2),
   -1px 13px 4px rgba(0,0,0,.2),
   4px 16px 7px rgba(0,0,0,.3);
  transition: .4s;
}
a.button20:active {
  box-shadow: none;
  -webkit-transform: translate(-7px, 8px);
  transform: translate(-7px, 8px);
}
a.button20:after {
  content: "";
  position: absolute;
  top: calc(50% - .6em/2);
  right: .6em;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  border: .37em solid;
  border-top: none;
  border-left: none;
  width: .6em;
  height: .6em;
  box-shadow: inset -2px 2px rgba(255,255,255,.3);
}
</style>

Voluminoso 4

Stili CSS del bottone

<style>
a.button23 {
  display: inline-block;
  color: rgba(255,255,255,1.8);
  text-decoration: none;
  text-shadow: 0 0 1px rgb(3,43,58);
  padding: .8em 1.2em;
  background: #0E8BB8 linear-gradient(#0A5E7D, #0E8BB8);
  box-shadow:
   0 15px 12px -12px rgb(0,0,0),
   0 -2px 0 -1px rgb(20,110,140),
   0 -4px 0 -2px rgb(18,108,138),
   0 -6px 0 -3px rgb(16,106,136),
   0 -8px 0 -4px rgb(14,104,134),
   0 -10px 0 -5px rgb(12,102,132),
   0 -12px 0 -6px rgb(10,100,130);
}
a.button23:active {
  margin: 0 calc(2px + 6px) 2px 0;
  padding: calc(.8em - 2px) calc(1.2em - 6px - 2px);
  border-left: 2px solid rgb(150,150,150);
  border-right: 2px solid rgb(150,150,150);
  border-bottom: 2px solid rgb(230,230,230);
  background: rgb(44,160,202) linear-gradient(rgb(62,184,229), rgb(44,160,202));
  box-shadow: none;
  -webkit-transform: translate(6px, -6px);
  transform: translate(6px, -6px);
}
</style>

Ordinare

Stili CSS del bottone

<style>
a.button22 {
  position: relative;
  display: inline-block;
  width: 6em;
  height: 2.5em;
  line-height: 2.4em;
  vertical-align: middle;
  text-align: center;
  text-decoration: none;
  user-select: none;
  color: #000;
  outline: none;
  border: 1px solid rgba(110,121,128,.8);
  border-top-color: rgba(0,0,0,.3);
  border-radius: 5px;
  background: rgb(206, 220, 231) linear-gradient(rgb(206,220,231), rgb(89,106,114));
  box-shadow:
   0 -1px rgba(10,21,28,.9) inset,
   0 1px rgba(255,255,255,.5) inset;
}
a.button22:hover {
  background: linear-gradient(#d2dfea, #71828c);
}
a.button22:active {
  line-height: 2.6em;
  background: linear-gradient(#bac6cf, #c5d3de 20%, #71828c);
  box-shadow: 0 -1px rgba(255,255,255,.4) inset;
}
a.button22:before {
  content: "";
  position: absolute;
  top: -10px; right: -10px; bottom: -10px; left: -10px;
  z-index: -1;
  border-radius: 8px;
  background: linear-gradient(rgba(200,200,200,.5), rgba(240,240,240,.5));
}
</style>

Stili CSS del bottone

<style>
a.boxShadow4 {
  display: inline-block;
  font-size: 24px;
  font-weight: bold;
  color: rgba(255,255,255,.6);
  text-shadow: 1px 1px rgba(0,0,0,.3);
  text-decoration: none;
  padding: 20px;
  border-radius: 15px;
  background: rgb(10,120,10);
  box-shadow:
   inset 0 0 3px 1px rgba(0,0,0,.8),
   inset rgba(0,0,0,.3) -5px -5px 8px 5px,
   inset rgba(255,255,255,.5) 5px 5px 8px 5px,
   1px 1px 1px rgba(255,255,255,.1),
   -2px -2px 5px rgba(0,0,0,.5);
  transition: .2s;
}
a.boxShadow4:hover {
  color: rgba(255,255,255,.9);
  background: rgb(20,130,20);
}
a.boxShadow4:active {
  background: rgb(0,110,0);
  box-shadow:
   inset 0 0 5px 3px rgba(0,0,0,.8),
   inset rgba(0,0,0,.3) -5px -5px 8px 5px,
   inset rgba(255,255,255,.5) 5px 5px 8px 5px,
   1px 1px 1px rgba(255,255,255,.2),
   -2px -2px 5px rgba(0,0,0,.5);
}
</style>

Pulsanti rotondi in CSS

Stili CSS del bottone

<style>
a.button29 {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  text-decoration: none;
  border: .5em solid rgba(0,0,0,0);
  border-radius: 100%;
  background: rgb(245,245,245) linear-gradient(rgb(245,245,245), rgb(188,192,193)) 50% 50% / calc(1.5em + .5em*2) calc(1.5em + .5em*2);
  box-shadow:
   inset 0 -3px 10px rgba(255,255,255,1),
   inset 0 3px 10px rgba(0,0,0,.4),
   0 2px 4px rgba(0,0,0,.9);
}
</style>

+

Stili CSS del bottone

<style>
a.button30 {
  position: relative;
  z-index: 1;
  display: inline-block;
  width: 1.3em;
  height: 1.3em;
  line-height: 1.3em;
  vertical-align: middle;
  text-align: center;
  text-decoration: none;
  text-shadow: 1px 1px rgba(255,255,255,.3);
  font-size: 300%;
  font-weight: 900;
  color: #000;
  border-radius: 100%;
  background: rgb(144,142,105) linear-gradient(rgb(185,181,151), rgb(144,142,105));
  box-shadow:
   inset 0 -2px 1px rgba(0,0,0,.5),
   inset 0 2px 1px rgba(255,255,255,.9),
   0 4px 4px rgba(0,0,0,.9);
}
a.button30:after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 12%;
  left: 12%;
  right: 12%;
  bottom: 12%;
  border-radius: 100%;
  background: rgb(242,203,20) linear-gradient(rgb(242,203,20), rgb(255,182,7));
  box-shadow:
   inset 0 2px 1px rgba(0,0,0,.5),
   inset 0 -2px 1px rgba(255,255,255,.3);
}
</style>

Bottoni animati coi CSS

Stili CSS del bottone

<style>
.button26 {
  position: relative;
  display: inline-block;
  border-radius: 100px;
  outline: none;
  box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset, 0 1px 1px rgba(255,255,255,.2);
  background: #8a7b78 linear-gradient(#8a7b78, #cdcdcd);
}
.button26 span {
  position: relative;
  display: block;
  width: 50px;
  height: 100px;
  border: solid transparent;
  border-width: 0 0 0 50px;
  border-radius: 100px;
  outline: none;
  overflow: hidden;
}
.button26 span:before {
  content: "";
  position: absolute;
  left: -50px;
  height: 100px;
  border-right: 50px solid transparent;
  border-left: 50px solid #bfddf5;
  border-radius: 100px;
}
.button26:after {
  content: "\260e";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 80px;
  height: 80px;
  line-height: 80px;
  font-size: 300%;
  font-weight: 700;
  text-align: center;
  text-shadow: #2e7ebd 0 1px 2px;
  color: #fff;
  margin: auto;
  border-radius: 100px;
  background: #75a7cd linear-gradient(#75a7cd, #5084a8);
  box-shadow: 0 2px 2px rgba(255,255,255,.5) inset, 0 -2px 2px rgba(0,0,0,.3) inset, 0 0 2px 2px rgba(0,0,0,.3);
}
.button26:focus span {
  -webkit-animation: background1 10s linear forwards;
  animation: background1 10s linear forwards;
}
.button26:focus span:before {
  -webkit-animation: rotate1 10s linear forwards;
  animation: rotate1 10s linear forwards;
}
.button26:focus:after {
  background: #5390b8 linear-gradient(#5390b8, #6ba9d4);
}
@-webkit-keyframes background1 {
  49.999% {border-width: 0 0 0 50px; border-color: transparent;}
  50%, 100% {border-width: 0 50px 0 0; border-color: #bfddf5;}
}
@-webkit-keyframes rotate1 {
  49.999% {left: -50px;}
  50% {left: 0px;}
  100% {-webkit-transform: rotate(360deg); left: 0px;}
}
@keyframes background1 {
  49.999% {border-width: 0 0 0 50px; border-color: transparent;}
  50%, 100% {border-width: 0 50px 0 0; border-color: #bfddf5;}
}
@keyframes rotate1 {
  49.999% {left: -50px;}
  50% {left: 0px;}
  100% {transform: rotate(360deg); left: 0px;}
}
</style>

Stili CSS del bottone

<style>
a.button31 {
  position: relative;
  z-index: 1;
  display: inline-block;
  width: 3em;
  height: 3em;
  border-radius: 100%;
  outline: none;
  background: #ddd;
  box-shadow: 0 1px rgba(0,0,0,.1) inset, 0 1px #fff;
}
a.button31:after, a.button31:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 7.5%;
  left: -15%;
  right: 0;
  bottom: 0;
  width: 30%;
  height: 10%;
  margin: auto;
  background: #999;
  box-shadow: 0 1px rgba(0,0,0,.1) inset, 0 1px #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
a.button31:before {
  left: 15%;
  -webkit-transform: rotate(315deg);
  transform: rotate(315deg);
}
a.button31:hover, a.button31:focus {
  background: #e35d31;
  box-shadow: none;
}
a.button31:hover:after, a.button31:hover:before {
  background: #fff;
  box-shadow: none;
}
a.button31:focus {
  background-image:
   linear-gradient(120deg, transparent 45%, #e35d31 45%, #e35d31 55%, transparent 55%),
   radial-gradient(transparent 20%, #fff 20%, #fff 30%, transparent 30%);
  -webkit-animation: rotate31 1s linear infinite forwards;
  animation: rotate31 1s linear infinite forwards;
}
a.button31:focus:after, a.button31:focus:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(-30% - 4px/2);
  left: 4px;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-left: 8px solid #fff;
  border-bottom: 4px solid transparent;
  background: transparent;
  box-shadow: none;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
a.button31:focus:before {
  top: calc(30% + 4px/2);
  left: -4px;
  border-left: none;
  border-right: 8px solid #fff;
}
@-webkit-keyframes rotate31 {
  100% {-webkit-transform: rotate(360deg);}
}
@keyframes rotate31 {
  100% {transform: rotate(360deg);}
}
</style>

Bottoni 3D in CSS.

Stili CSS del bottone

<style>
a.button2, a.button2:before {
  display: inline-block;
  font-size: 20px;
  color: #fff;
  text-decoration: none;
  padding: 8px 15px;
  border-radius: 100px;
  border: solid rgb(4,88,192);
  border-width: 3px 10px;
  outline: none;
  opacity: 1;
  transition: .6s, opacity 0s 9999999s, visibility 0s 9999999s;
} 
a.button2 {
  position: relative;
  padding: calc(8px + 3px - 1px) calc(15px + 10px - 1px);
  border: 1px solid rgba(62,153,239,.5);
  background: linear-gradient(to left, rgb(62,153,239) 1%, #fff 3%, rgb(44,135,232) 8%, rgba(255,255,255,.3) 50%, rgb(44,135,232) 92%, #fff 97%, rgb(62,153,239) 99%) no-repeat;
}
a.button2:before {
  content:  "Scopri di piu";
  position:  absolute; 
  bottom: -7px;
  left: -1px;
  width: calc(100% - (15px + 10px - 1px)*2);
  background: #fff linear-gradient(rgb(58,160,253), rgb(4,88,192) 60%, rgb(49,112,201));
  box-shadow: 0 10px 18px rgba(0,0,0,.5);
}
a.button2:hover {
  -webkit-transform: scale(1.1, 1.1);
  transform: scale(1.1, 1.1);
}
a.button2:hover:before {
  border-color: #0766d8;
  background: #fff linear-gradient(#3fadff, #0766d8 60%, #3279dd);
}
a.button2:focus,
a.button2:active {
  -webkit-transform: scale(2, 2);
  transform: scale(2, 2);
  opacity: 0;
  visibility: hidden;
  transition: .4s;
}
</style>

E vorrei fare un apremessa alla fine del articolo, bottoni che utilizzi sul tuo sito web dovrebbero seguire la linea generale di colori del tuo sito. Ovviamente che puoi inserire un bottone diverso rispetto colori predefiniti ma direi solo in una o due situazioni per evidenziare qualcosa molto importante. E per quanto riguarda gli stili dei bottoni del articolo  potrai sempre cambiare qualsiasi regola css a tuo piacere.

Letto 916 volte