Animated Buttons II: Circular Buttons

animated-buttons-ii-circular-buttons.markdown

Animated Buttons II: Circular Buttons

More animation buttons but for round buttons. Spinning buttons, focus rings, etc.

A Pen by Allison Betancourt on CodePen.

License.

index.html

<h1>Animated Buttons II: Circular Buttons</h1>
<p>Animations for circular buttons</p>

<h3>Examples</h3>
<div class="example-wrap">
  <div class="button-wrap-1 example">
    <a href class="clicker">Rotor Button</a>
    <div class="circle"></div>
  </div>
  
  <div class="button-wrap-2 example">
    <a href class="circle">Zoom Button</a>
    <div class="outer-circle"></div>
  </div>
</div>

<h4>Styling Notes</h4>

style.scss

/*** Example Styles ****/
body {
  max-width: 1024px;
  margin: 20px auto;
}
.example-wrap {
  display: inline-block;
}
.example {
  float: left;
}

/***** 1. Rotor ********/
@-webkit-keyframes rotor{
  from{ -webkit-transform: rotate(0deg); }
	to{ -webkit-transform: rotate(360deg); }
}
@-moz-keyframes rotor{
  from{ -moz-transform: rotate(0deg); }
	to{ -moz-transform: rotate(360deg); }
}
@-o-keyframes rotor{
  from{ -o-transform: rotate(0deg); }
	to{ -o-transform: rotate(360deg); }
}
@keyframes rotor{
  from{ transform: rotate(0deg); }
	to{ transform: rotate(360deg); }
}

.button-wrap-1 {
  width: 120px;
  height: 120px;
  margin: 20px 0;
  display: inline-block;
  position: relative;
  
  .clicker {
    /* Inner circle */
    width: 100px;
    height: 100px; /* 20px smaller b/c of margin below */
    margin: 10px;
    background-color: #fff;
    border-radius: 60px;
    
    /* Overlays this circle on the .circle */
    z-index: 2;
    position: absolute;
    
    /* centers the text: adjust to desired size */
    padding: 22px 10px; 
    text-align: center;
    
    /* shadow */
    -webkit-box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.5);
    -moz-box-shadow:    0px 0px 7px 0px rgba(0, 0, 0, 0.5);
    -o-box-shadow:      0px 0px 7px 0px rgba(0, 0, 0, 0.5);
    box-shadow:         0px 0px 7px 0px rgba(0, 0, 0, 0.5);
  }
  .circle {
    /** outer circle **/
    width: 120px;
    height: 120px;
    border-radius: 60px;
    
    /** image = wedge **/
    background-image: linear-gradient(45deg, 
                white 0%,
                white 30%,
                rgb(20,190,235) 30%,
								rgb(20,190,235) 70%, 
                white 70%, 
                white 100%);
    
    /*** outer circle position: under */
    z-index: 1;
    position: absolute;
  }
  .clicker:hover + .circle, .clicker:active + .circle {
    -webkit-animation: rotor 1.5s linear 0s infinite normal;
    -mox-animation: rotor 1.5s linear 0s infinite normal;
    -o-animation: rotor 1.5s linear 0s infinite normal;
    animation: rotor 1.5s linear 0s infinite normal;
  }
}

// 2. Zoom ring example
@-webkit-keyframes zoom {
  0%   { -webkit-transform: scale(1); }
	50%  { -webkit-transform: scale(0.8); }
  100% { -webkit-transform: scale(1); }
}
@-moz-keyframes zoom {
  0%   { -moz-transform: scale(1); }
	50%  { -moz-transform: scale(0.8); }
  100% { -moz-transform: scale(1); }
}
@-o-keyframes zoom {
  0%   { -o-transform: scale(1); }
	50%  { -o-transform: scale(0.8); }
  100% { -o-transform: scale(1); }
}
@keyframes zoom {
  0%   { transform: scale(1); }
	50%  { transform: scale(0.8); }
  100% { transform: scale(1); }
}

.button-wrap-2 {
  width: 120px;
  height: 120px;
  margin: 20px 0;
  display: inline-block;
  position: relative;
  
  .circle {
    /* Inner circle */
    width: 100px;
    height: 100px; /* 20px smaller b/c of margin below */
    margin: 10px;
    background-color: #fff;
    border-radius: 60px;
    
    /* Overlays this circle on the .circle */
    z-index: 2;
    position: absolute;
    
    /* centers the text: adjust to desired size */
    padding: 22px 10px; 
    text-align: center;
    
    /* shadow */
    -webkit-box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.5);
    -moz-box-shadow:    0px 0px 7px 0px rgba(0, 0, 0, 0.5);
    -o-box-shadow:      0px 0px 7px 0px rgba(0, 0, 0, 0.5);
    box-shadow:         0px 0px 7px 0px rgba(0, 0, 0, 0.5);
  }
  
  .outer-circle {
    /** outer circle **/
    width: 120px;
    height: 120px;
    border-radius: 60px;
    background-color: rgb(20,190,235);
    
    /*** outer circle position: under */
    z-index: 1;
    position: absolute;
  }
  
  .circle:hover + .outer-circle, .circle:active + .outer-circle {
    -webkit-animation: zoom 1s ease-in 0s 1 both;
    -mox-animation: zoom 1s ease-in 0s 1 both;
    -o-animation: zoom 1s ease-in 0s 1 both;
    animation: zoom 1s ease-in 0s 1 both;
  }
}

styles

<link href="https://cdn.jsdelivr.net/foundation/5.5.0/css/foundation.css" rel="stylesheet" />