oYNKKG

index.jade

.container
  .one
    p 1
  .two
    p 2
  .three
    p 3
  .four
    p 4
  .five
    p 5
  .six
    p 6   
  button 7

oynkkg.markdown

oYNKKG

A Pen by stefan aerts on CodePen.

License.

script.js

$(function(){
  $(':button').bind('click', function() {
     $(this).toggleClass('active');
    
     $('.one').css("border-color","#4096DA");
  });
});

scripts

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

style.scss

html {
  /* Basic */
  &:hover .one {
    transform: rotate(360deg);
    top: 300px;
  }
  
  /* Duration */
  &:hover .two {
    transform: rotate(360deg);
    top: 300px;
  }
  
  /* Delay */
  &:hover .three {
    top: 300px;
  }
  
  /* Multiple */
  &:hover .four {
    background-color: #6DCEDA;
    top: 300px;
    border-radius: 50%;
    opacity: 0.3;
  }
  
  /* Targeting multiple properties */
  &:hover .five {
    top: 300px;
    left: 178px;
    background-color: #6DCEDA;
    color:#fff;
  }
  
  /* Cubic bezier */
  &:hover .six {
    top: 300px;
  }
}

.container {
  > div, button{
    float: left;
    width: 70px;
    height: 70px;
    border: 5px solid #6DCEDA;
    color: #6DCEDA;
    font-family: helvetica;
    font-size: 22px;
    text-align: center;
    margin: 5px;
    padding: 0;
    position: relative;
    background:#fff;
  }
  
  /* Basic */
  .one {
    transition: all 1s ease-in-out;
    top: 0;
  }
  
  /* Duration */
  .two {
    transition: top 3s ease-in-out;
    top: 0;
  }
  
   /* Delay */
  .three {
    transition: top 1s ease-in-out 500ms;
    top: 0;
  }
  
  /* Multiple  */
  .four {
    transition: all 1s linear;
    border-radius: 0;
    top: 0;
    opacity: 1;
  }
  
  /* Targeting multiple properties */
  .five {
    transition-property: top, left, background, color;
    transition-duration: 1s, 200ms, 1s, 1s;
    transition-delay: 1s, 0s, 200ms, 200ms;
    transition-timing-function: linear, ease-in, linear, linear;
    top: 0;
    left:0;
    background-color:#fff;
  }
  
  /* cubic bezier */
  .six {
    transition: all 1s cubic-bezier(0, 1.71, .57, .72);
    top:0;
    border-radius:50%;
  }
  
  button{
    float:left;
    width: 79px;
    height: 79px;
    transition: all 200ms ease-in-out;
    box-shadow: none;
    top:0;
  }
  
  .active{
    top:-1px;
    box-shadow: 5px 5px 5px #888888;
  }
}