<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div class="container"> <div class="row"> <h2 class="text-center">Vehículos</h2> </div> <div class="row"> <input placeholder="Número Económico" type="text" required> </div> <div class="row"> <input placeholder="Placas" type="text" required> </div> <div class="row"> <input placeholder="Año Módelo" type="text" required> </div> <div class="row"> <input placeholder="Tipo de Vehículo" type="text" required> </div> <div class="row"> <input placeholder="Permiso SCT" type="text" required> </div> <div class="row mt-3"> <button class="btn btn-primary" type="submit">Guardar</button> </div> </div>

input { margin: 40px 25px; width: 200px; display: block; border: none; padding: 20px 0; border-bottom: solid 1px #1abc9c; -webkit-transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1); transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1); background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 96%, #1abc9c 4%); background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #1abc9c 4%); background-position: -200px 0; background-size: 200px 100%; background-repeat: no-repeat; color: #0e6252; } input:focus, input:valid { box-shadow: none; outline: none; background-position: 0 0; } input::-webkit-input-placeholder { font-family: 'roboto', sans-serif; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } input:focus::-webkit-input-placeholder, input:valid::-webkit-input-placeholder { color: #1abc9c; font-size: 11px; -webkit-transform: translateY(-20px); transform: translateY(-20px); visibility: visible !important; }