jQuery addClass example

Change class name on click in jQuery

by Ayri Rin

HTML

<div class="container">
  <h1>Button Hover Effects</h1>
  <div class="btn" data-type="swipe">
    button 01
  </div>
  <div class="btn" data-type="pos_aware">
    button 02
  </div>
  <div class="btn" data-type="diagonal_swipe_left">
    button 03
  </div> 
  <div class="btn" data-type="diagonal_swipe_right">
    button 04
  </div>
 
  <div class="btn" data-type="double_swipe">
    button 05
  </div>
  
  <div class="btn" data-type="colusion">
    button 06
  </div>
  
  <div class="btn" data-type="letter_spacing">
    button 07
  </div>
</div>

SCSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400|Raleway:300);

$btn-width  : 250px !default;
$btn-height : 80px !default;
$color1 : #fff;
$color2 : #e91e63;
$lineheight : 80px;
$margin : 25px;
$trans_delay : .1s;


 *,
  *:before,
  *:after {
     -webkit-box-sizing:border-box;
     box-sizing:border-box;
    -webkit-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
  }

body, html{
  font-family: 'Open Sans', Helvetica, arial, sans-serif;
  text-align: center;
  background:$color2;
}

h1{
  color:$color1;
}

.container{
  width:80%;
  max-width:700px;
  margin:0 auto;
}

.btn{
  display:block;
  width:$btn-width;
  height:$btn-height;
  border:1px solid $color1;
  overflow:hidden;
  color:$color1;
  line-height:$lineheight;
  text-transform:capitalize;
  float:left;
  z-index:1;
  margin: $margin;
  border-radius:3px;
  font-size:1.2em;
  position:relative;
  -webkit-transition: 1s ease-out;
   transition: 1s ease-out;
}

/*-------------- hover types --------------*/
[data-type]{
  &:before{
    -webkit-transition: 0.5s;
     transition: 0.5s;
    z-index:-1;
  }
  &:hover{
    -webkit-box-shadow:0 5px 20px rgba(0,0,0,.5);
    box-shadow:0 5px 20px rgba(0,0,0,.5);
     cursor:pointer;
     -webkit-transition-delay:$trans_delay;
      transition-delay:$trans_delay;
      color:$color2;
      z-index:8;
  }
}
/*--------- Swipe ---------------*/
[data-type="swipe"]{
  &:before{
      content:'';
      position:absolute;
      left:-100%;
      top:0;
      display:block;
      width:100%;
      height:100%;
      background:$color1;
    }
  &:hover{
    &:before{
      left:0;  
      z-index:-5;
     -webkit-transform: scale(1.2);
     transform: scale(1.2);
   -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
   transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
      -webkit-transition-duration: 0.5s;
     transition-duration: 0.5s;
    }
  }
}

/*--------position aware...