EjLvwM

EjLvwM.markdown

EjLvwM

A Pen by Dom on CodePen.

License.

index.html

<div class='container'>
  <span class='pulse-button'></span>
</div>

style.css

@import "compass/css3";

//
//  Try to keep the below variables  as either EVEN or ODD values:
//  e.g:
//  $circle-size:34px; $arrow-size:20px; $arrow-thickness:4px;
//  OR
//  $circle-size:33px; $arrow-size:17px; $arrow-thickness:3px;
//

$circle-size:33px;
$arrow-size:17px;
$arrow-thickness:3px;

// Don't touch below here unless you know what you're doing


body, html {
  height: 100%;
}

.container {
  width: 800px;
  bordeR:solid 1px red;
  height: 500px;
  margin: 0 auto 0;
  background: url('https://okl1-scene7.insnw.net/is/image/OKL/SalesEvent_56731_Logo_1?$story-hero$') 50% 50% no-repeat;
  background-size:100% 100%;
}



.pulse-button {
  position: relative;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
  display: block;
  width: $circle-size;
  height: $circle-size;
  color: white;
  border-radius: 50%;
  border:solid 3px white;
  cursor: pointer;
  box-shadow: 0 2px 3px rgba(0,0,0,.5);
  -webkit-animation: pulse 2.5s infinite;
  
  &:after, &:before {
    background-color:white;
    content:'';
    position:absolute;
    display:block;
    border-radius:2px;
    top:50%;
    left:50%;
  }
  
  //Vertical
  &:after {
    margin-top:-$arrow-size/2;
    margin-left:-$arrow-thickness/2;
    width:$arrow-thickness;
    height:$arrow-size;
  }
  
  //Horizontal
  &:before {
    margin-top:-$arrow-thickness/2;
    margin-left:-$arrow-size/2;
    width:$arrow-size;
    height:$arrow-thickness;
  }
  
  &:hover {
    -webkit-transform:scale(1.2);
  }
  
  
}


.pulse-button:hover {
  -webkit-animation: none;
}

@-webkit-keyframes pulse {
  0% {
    @include transform(scale(1));
  }
  10% {
    @include transform(scale(1.3));
  }
  20% {
    @include transform(scale(1));
  }
  40% {
    @include transform(scale(1.6));
  }
  100% {
    @include transform(scale(1));
  }
}