Button with Hover Effect

button-with-hover-effect.markdown

Button with Hover Effect

A Pen by Sasha on CodePen.

License.

index.html

<div class="container">
  <div class="title">
    <a href="http://codepen.io/sashatran/" target="_blank">Subscribe Now</a>
    </div>
</div>

script.js

$(".title").hover(function(){
  $(this).toggleClass("is-active");
})

//Without JS by Ana Tudor
// https://codepen.io/anon/pen/egGKwv

// by Scott
//Button to zoom in instead of moving down
// http://codepen.io/scottjenson/pen/mRBGbP

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

style.scss

@import url('https://fonts.googleapis.com/css?family=Roboto');
* {
  padding: 0;
  margin: 0;
}

.container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(50deg, #B388EB, #8093F1);
  opacity: 0.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(#000000, 0.2);
  padding: 15px 20px;
  transition: all .5s ease;
  border-radius: 3px;
  cursor: pointer;
  a {
    text-decoration: none;
    color: #FFF;
  }
}

.is-active {
  box-shadow: 0 20px 5px -10px rgba(#000, 0.4);
  transform: translateY(10px);
}