Вращающееся кнопки с помощью CSS

Очень оригинальный и интересный пример создание кнопок с эффектом вращения границ при наведении (hover-effect). Изменяя CSS свойство animation можно любому из примеров уменьшать или увеличивать скорость вращения.

HTML

<link href='http://fonts.googleapis.com/css?family=Open+Sans:600,700' rel='stylesheet' type='text/css'>

 <div class="container">
Умеренно, border-radius, 45deg background
<div class="wrap"> 
 <button class="clicker">press</button>
 <div class="circle angled"></div>
 </div>

Быстро, border-radius, vertical background
 <div class="wrap"> 
 <button class="clicker fast">press</button>
 <div class="circle angled second"></div>
 </div>

Очень быстро, no border-radius, 45 deg background
<div class="wrap"> 
 <button class="clicker faster">press</button>
 <div class="circle angled third"></div>
 </div>
</div>

CSS

* {
 font-family: 'Open Sans', sans-serif;
}

html, body{
 text-align: center;
 background-color: #F02233;
}

.container{
 padding: 20px;
 background-color: white;
 box-shadow: 0 0 4px 1px white;
 width: 400px;
 height: 400px;
 margin: auto;
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 text-align: center;
}

.wrap{ 
 position: relative;
 width: 80px;
 height: 80px;
 margin: 10px auto 15px auto;
}

.clicker{
 background-color: white;
 outline: none; 
 font-weight: 600;
 position:absolute;
 cursor: pointer;
 padding: 0;
 border: none;
 height: 64px;
 width: 64px;
 left: 8px;
 top: 8px;
 border-radius: 100px;
 z-index: 2;
}

.clicker:active{
 transform: translate(0, 1px);
 height: 63px;
 box-shadow: 0px 1px 0 0 rgb(190,190,190) inset;
}

.circle{
 position: relative;
 border-radius:40px;
 width: 80px;
 height: 80px;
 z-index: 1;
}

.circle.third{
 border-radius: 0;
}

.clicker.faster:hover + .circle, .clicker.faster:active + .circle {
 animation: rotator linear .4s infinite;
}

.clicker.fast:hover + .circle, .clicker.fast:active + .circle {
 animation: rotator linear .5s infinite;
}

.clicker:hover + .circle, .clicker:active + .circle {
 animation: rotator linear .8s infinite;
}

@keyframes rotator{
 from{ transform: rotate(0deg); }
 to{ transform: rotate(360deg); }
}

 
.angled {
 background-image: linear-gradient(45deg, 
 white 0%,
 white 30%,
 rgb(20,190,235) 30%,
 rgb(20,190,235) 70%, 
 white 70%, 
 white 100%);
 }

.angled.second{
 background-image: linear-gradient( 
 white 0%,
 white 30%,
 rgb(250,160,120) 30%,
 rgb(250,160,120) 70%, 
 white 70%, 
 white 100%);
}

.angled.third{
 background-image: linear-gradient(45deg, 
 white 0%,
 white 30%,
 rgb(130,230,135) 30%,
 rgb(130,230,135) 70%, 
 white 70%, 
 white 100%);
 }
}