Button with Hover Effect

Button with Hover Effect CSS

Button with Hover Effect / Boton con efecto hover con Css, Html y JS

By: Sasha


Subscribe for more Code

Recibe las Actualizaciones de HTML y CSS


HTML

<div class="container">
 <div class="title">
 <a href="#" target="_blank">Subscribe Now</a>
 </div>
</div>
CSS

*{padding:0;margin:0}
.container{height:100vh;display:flex;justify-content:center;align-items:center;background:linear-gradient(50deg,#B388EB,#8093F1);opacity:.8;filter:saturate(1.6)}
.title{width:200px;height:20px;font-size:16px;font-family:Roboto,sans-serif;color:#FFF;text-transform:uppercase;text-align:center;letter-spacing:4px;background:rgba(0,0,0,.2);padding:15px 20px;transition:all .5s ease;border-radius:3px;cursor:pointer}
.title a{text-decoration:none;color:#FFF}
.is-active{box-shadow:0 20px 5px -10px rgba(0,0,0,.4);transform:translateY(10px)}

JS

http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js

JS

$(".title").hover(function(){  $(this).toggleClass("is-active");});
¿Te gusto el post?
¡Compártelo!

Gabriela Laya

Me gusta mucho el Diseño Web, Crear plantillas para Wordpress y Blogger y todo lo relacionado a estas 2 plataformas de Blogs. En mi tiempo libre me encanta Leer, aprender a usar nuevos programas, escuchar música y más :D

Recibe las últimas actualizaciones