Pulsante con animazione
Codice HTML
<form method="get" action="http://www.puntoinformaticofree.it/"><button class="mybtn animato">Scopri di più</button></form>
Codice CSS
.mybtn { box-sizing: border-box; -webkit-appearance: none;em -moz-appearance: none; appearance: none; background-color transparent; border: 3px solid #e74c3c; border-radius: 3em; color: #FF6600; cursor: pointer; display: flex; align-self: center; font-size: 16px; font-weight: 400; line-height: 1; margin: 20px; padding: 1.2em 2.8em; text-decoration: none; text-align: center; text-transform: uppercase; font-family: 'Montserrat', sans-serif; font-weight: 700; }.animato { border-color: #FF6600; border-radius: 3; color: #FF6600; position: relative; overflow: hidden; z-index: 1; transition: color 150ms ease-in-out; }
.animato:after { content: ''; position: absolute; display: block; top: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 0; height: 100%; background: #FF6600; z-index: -1; transition: width 150ms ease-in-out; } .animato:hover { color: white; } .animato:hover:after { width: 110%; }