<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section> <div class="container"> <div class="row"> <div class="col-md-4 col-md-offset-3"> <hgroup> <h4> Por favor, seleccione los boletines que desea inscribirse para: <select class="frecuency"> <option value="0">Noticias Matutinas</option> <option value="1" selected>Noticias Vespertinas</option> <option value="2">Ambas</option> </select> </h4> </hgroup> <div class="well"> <form action="#"> <div class="input-group"> <input class="btn btn-lg" name="email" id="email" type="email" placeholder="Correo Electronico" required> <button class="btn btn-info btn-lg" type="submit">Suscribirse!</button> </div> </form> </div> </div> </div> </div> </section>

section { padding: 100px 0; text-align: center; } select.frecuency { border: none; font-style: italic; background-color: transparent; cursor: pointer; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform .35s ease-in; transition: -webkit-transform .35s ease-in; border-bottom: none; } select.frecuency:focus { outline: none; border-bottom: 5px solid #39b3d7; -webkit-transform: translateY(-5px); transform: translateY(-5px); -webkit-transition: -webkit-transform .35s ease-in; transition: -webkit-transform .35s ease-in; } .free { text-transform: uppercase; } .input-group { margin: 20px auto; width: 100%; } input.btn.btn-lg, input.btn.btn-lg:focus { outline: none; width: 60%; height: 60px; border-top-right-radius: 0; border-bottom-right-radius: 0; } button.btn { width: 40%; height: 60px; border-top-left-radius: 0; border-bottom-left-radius: 0; } .promise { color: #999; }