I CSS3 ti danno la possibilità di arricchire le tue pagine con effetti sorprendenti.
In questo tutorial ti propongo quattro effetti hover per i bottoni dei tuoi links.
L’idea nasce per essere applicata alle voci di menu ma nessuno ti vieta di rendere un link all’interno della pagina più accattivante e spettacolare con questi effetti.
Ma andiamo alla struttura del bottone e al suo foglio di stile:
Il markup è molto semplice:
- una
<section>
con una classe color-1 che dà il background - di seguito, i bottoni con 3 classi
<section class="color-1"> <p> <button class="btn btn-1 btn-1a">Home</button> </p> <p> <button class="btn btn-1 btn-1d">Prodotti</button> <button class="btn btn-1 btn-1e">Portfolio</button> <button class="btn btn-1 btn-1f">Contatti</button> </p> </section>
Come vedi, ogni bottone ha delle classi ben precise:
- btn -> la classe generica per tutti i bottoni
btn-1 -> classe per dare le proprietà principali al bottone
btn-1a – btn-1a, etc. -> per gli effetti hover specifici per ogni bottone
Il foglio di stile raccoglie tutte le regole necessarie per il corretto funzionamento dei bottoni, sta a te cambiare alcuni valori per personalizzare gli effetti hover, prova quelli che stimolano di più la tua fantasia.
/* Stile di base */ @import url(http://fonts.googleapis.com/css?family=Lato:300,400,700); *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body, html { font-size: 100%; padding: 0; margin: 0; height: 100%;} /* Clearfix*/ .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } body { font-family: 'Lato', Calibri, Arial, sans-serif; color: #89867e; background: #fff; } a { color: #888; text-decoration: none; } a:hover, a:active { color: #333; } /* Header */ .main, .container > header { margin: 0 auto; padding: 2em; } .container > header { text-align: center; } .container > header h1 { font-size: 2.625em; line-height: 1.3; margin: 0; font-weight: 300; } .container > header span { display: block; font-size: 60%; opacity: 0.5; padding: 0 0 0.6em 0.1em; } .container { height: 100%; position: relative; } .container > section { margin: 0 auto; padding: 5em 3em; text-align: center; color: #fff; } .container > section p { position: relative; margin: 0; padding: 1em; z-index: 1; } .container > section p.text { font-size: 1.4em; } .color-1 { background: #435A6B; } /* Stile generico dei bottoni*/ .btn { border: none; font-family: inherit; font-size: inherit; color: inherit; background: none; cursor: pointer; padding: 25px 80px; display: inline-block; margin: 15px 30px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; outline: none; position: relative; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .btn:after { content: ''; position: absolute; z-index: -1; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } /* Bottone */ .btn-1 { border: 3px solid #fff; color: #fff; } /* Bottone 1a */ .btn-1a:hover, .btn-1a:active { color: #435A6B; background: #fff; } /* Bottone 1d */ .btn-1d { overflow: hidden; } .btn-1d:after { width: 0; height: 103%; top: 50%; left: 50%; background: #fff; opacity: 0; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .btn-1d:hover, .btn-1d:active { color: #435A6B; } .btn-1d:hover:after { width: 90%; opacity: 1; } .btn-1d:active:after { width: 101%; opacity: 1; } /* Bottone 1e */ .btn-1e { overflow: hidden; } .btn-1e:after { width: 100%; height: 0; top: 50%; left: 50%; background: #fff; opacity: 0; -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg); -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg); -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg); transform: translateX(-50%) translateY(-50%) rotate(45deg); } .btn-1e:hover, .btn-1e:active { color: #435A6B; } .btn-1e:hover:after { height: 260%; opacity: 1; } .btn-1e:active:after { height: 400%; opacity: 1; } /* Bottone 1f */ .btn-1f { overflow: hidden; } .btn-1f:after { width: 101%; height: 0; top: 50%; left: 50%; background: #fff; opacity: 0; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .btn-1f:hover, .btn-1f:active { color: #435A6B; } .btn-1f:hover:after { height: 75%; opacity: 1; } .btn-1f:active:after { height: 130%; opacity: 1; }
Il risultato finale:
See the Pen CSS Hover effects by Eugenio (@rupertone) on CodePen.0
DEMO CSS3 LINKS Qui trovate i files della demo
Tutto si basa sulla proprietà “transform“, che ti dà infinite possibilità per ottenere effetti interessanti da applicare a qualsiasi elemento.
Ciao e buon lavoro 🙂
Spero che il tutorial ti sia piaciuto, se hai domande o vuoi approfondire il tema, batti un colpo 😉