Dopo aver visto come realizzare di quadrati responsive, analizziamo come fare per ottenere invece dei cerchi responsive, utili per creare bottoni e pulsanti che si adattano alle varie risoluzioni del dispositivo su cui andiamo a realizzare il nostro sito web.
Anche in questo caso utilizziamo esclusivamente poche righe di HTML e CSS per ottenere il risultato desiderato.
NB: dal momento che, per realizzare dei cerchi ci si avvale della proprietà border-radius, ne va da sè che su Internet Explorer 8 e precedenti non otterremo il risultato gradito, salvo avvalersi di polyfills esterni.
Il codice HTML
Per quanto riguarda la struttura HTML avremo la necessità di utilizzare una struttura a 3 livelli:
<div class="round-button"><div class="round-button-circle"><a href="#" class="round-button">Hey!!</a></div></div> <div class="round-button"><div class="round-button-circle"><a href="#" class="round-button">Hey!!</a></div></div> <div class="round-button"><div class="round-button-circle"><a href="#" class="round-button">Hey!!</a></div></div> <div class="round-button"><div class="round-button-circle"><a href="#" class="round-button">Hey!!</a></div></div>
Il codice CSS
I padding in % si occupano di centrare il contenuto, il border-radius al 50% trasforma il nostro bottone in un cerchio cliccabile:
.round-button {
width:25%;
display:inline-block;
}
.round-button-circle {
width: 100%;
height:0;
padding-bottom: 100%;
border-radius: 50%;
overflow:hidden;
background: #4679BD;
margin-right:-0.25em;
}
.round-button-circle:hover {
background:#30588e;
}
.round-button a {
display:block;
float:left;
width:100%;
padding-top:50%;
padding-bottom:50%;
line-height:1em;
margin-top:-0.5em;
text-align:center;
color:#e2eaf3;
font-family:Verdana;
font-size:1.2em;
font-weight:bold;
text-decoration:none;
}Et voilà, qualche riga di codice ed il risultato è garantito. Ed ecco il risultato ottenuto:
