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%;  }