Creare 3D Button CSS3 circolari in stile minimal

Creare 3D Button CSS3 circolari in stile minimal (Minimal Circular 3D Buttons with CSS)

Oggi, in questo breve tutorial, svilupperemo dei bottoni in 3D circolari in stile minimale. Tutto questo senza nessun codice JavaScript o jQuery, ma solo con l’aiuto del codice CSS3. Inoltre non utilizzeremo nessuna immagine, ma giocheremo con le ombre e i caratteri del font scelto.

Iniziamo subito!

Per creare dei Minimal Circular 3D Buttons, abbiamo bisogno del font “Fontello”. Per l’esempio che stiamo per mostrarvi, ho utilizzano una texture di background creata con Subtle Patterns.

Questo e’ quello che realizzeremo:

DEMO

Pronti? Via!

Codice Html

<nav>
			<ul class="nav">
				<li><a href="#" class="icon-home"></a></li>
				<li><a href="#" class="icon-cog"></a></li>
				<li><a href="#" class="icon-cw"></a></li>
				<li><a href="#" class="icon-location"></a></li>
			</ul>
		</nav>

In questa maniera abbiamo deciso di mettere 4 icone, ognuna delle quali ha un link completamente personalizzabile. Quattro bottoni che rimandano alle relative pagine.
Adesso scriviamo il codice CSS che ci permetta di rendere il tutto piu’ stiloso e degno del nostro design.
Codice CSS

@font-face {
  font-family: 'fontello';
  src: url('../fonts/fontello.eot');
  src: url('../fonts/fontello.eot?#iefix') format('embedded-opentype'),
       url('../fonts/fontello.woff') format('woff'),
       url('../fonts/fontello.ttf') format('truetype'),
       url('../fonts/fontello.svg#fontello') format('svg');
  font-weight: normal; font-style: normal;
}

[class*="icon-"] {
  font-family: 'fontello';
  font-style: normal;
  font-size: 3em;
  speak: none;
}

.icon-home:after { content: "\2302"; }
.icon-cog:after { content: "\2699"; }
.icon-cw:after { content: "\27f3"; }
.icon-location:after { content: "\e724"; }

Con questa serie di codice andiamo a definire la regola font-face con cui diciamo di prendere il nostro font scelto, e poi nell0ultima parte indichiamo la serie di caratteri per far uscire l’icona che a noi interessa.
Continuiamo a scrivere il nostro CSS:

.nav {
  list-style: none;
  text-align: center;
}

.nav li {
  position: relative;
  display: inline-block;
  margin-right: -4px;
}

Questo serve per dire che i nostri bottoni circolare devono essere disposti in orizzontale. Display:inline-block, lo afferma e poi gli diamo un margine destro negativo.
Adesso dobbiamo concentrarsi sull’aspetto dei nostri bottoni. Bisogna dargli una parvenza di tridimensionalita’, attraverso sfumature, smussatore e ombre. Con la regola Border-radius diamo una forma circolare e poi centriamo il testo. Ecco il codice:

.nav a {
  display: block;
  background-color: #f7f7f7;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#e7e7e7));
  background-image: -webkit-linear-gradient(top, #f7f7f7, #e7e7e7);
  background-image: -moz-linear-gradient(top, #f7f7f7, #e7e7e7);
  background-image: -ms-linear-gradient(top, #f7f7f7, #e7e7e7);
  background-image: -o-linear-gradient(top, #f7f7f7, #e7e7e7);
  color: #a7a7a7;
  margin: 36px;
  width: 144px;
  height: 144px;
  position: relative;
  text-align: center;
  line-height: 144px;
  border-radius: 50%;
  box-shadow: 0px 3px 8px #aaa, inset 0px 2px 3px #fff;
}

Ora vogliamo dare ai nostri pulsanti un effetto di rientro quando vengono premuti e quindi introduciamo la regola :hover

.nav a:hover {
  text-decoration: none;
  color: #555;
  background: #f5f5f5;
}

Ecco come appaiono adesso i nostri pulsanti:

Ma ancora non abbiamo finito, adesso inizia la parte divertente. Vogliamo giocare con delle pseudo classi per riuscire a dare un look piu’ reale ai nostri circular buttons. Creiamo la scanalatura tra un bottone e l’altro:

.nav li:before {
  content: "";
  display: block;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #fff;
  width: 100%;
  height: 1px;
  position: absolute;
  top: 50%;
  z-index: -1;
}

Adesso diamo un senso di tridimensionale, spingiamo in dentro il nostro pulsante, per creare un effetto di profondita’:

.nav a:before {
  content: "";
  display: block;
  background: #fff;
  border-top: 2px solid #ddd;
  position: absolute;
  top: -18px;
  left: -18px;
  bottom: -18px;
  right: -18px;
  z-index: -1;
  border-radius: 50%;
  box-shadow: inset 0px 8px 48px #ddd;
}

Ecco fatto, abbiamo creato i nostri Circular Buttons in 3D solo con l’uso dei CSS3.