.formulario{
 width: 360px;
}

.formulario .box-input{
 border-bottom: 2px solid #adadad;
 position: relative;
 margin: 30px 0;
}

.formulario .box-input input{
 font-size: 16px;
 color: #333;
 border: none;
 width: 100%;
 outline: none;
 background: none;
 padding: 0 5px;
 height: 40px;
}

.formulario .box-input span::before{
 content: attr(data-placeholder);
 position: absolute;
 top: 50%;
 left: 5px;
 color: #adadad;
 transform: translateY(-50%);
 z-index: -1;
 transition: .5s;
}

.formulario .box-input span::after{
 content: '';
 position: absolute;
 width: 0%;
 height: 2px;
 background: linear-gradient(120deg, #3498db, #8e44ad);
 transition: .5s;
}

.formulario .focus + span::before{
 top: -5px;
}

.formulario .focus + span::after{
 width: 100%;
}

.formulario .boton{
 display: block;
 width: 100%;
 height: 50px;
 background-color: #48bb78;
 border: solid 2px #48bb78;
 color: #fff;
 border-radius: 5px;
 font-weight: 600;
 font-size: 18px;
 box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.1);
}

.formulario .boton:hover{
 background-color: #2F855A;
 border: solid 2px #2F855A;
 transition: .5s;
}