A CodePen by TEUCG. Double ring - Single element, pseudo-element animate // variant of http://codepen.io/fixcl/pen/LGntc // Test Animate pseudo-element (SINGLE ELEMENT) / ANIMATE + ELEMENT http://codepen.io/fixcl/pen/anwsG
@import url(http://fonts.googleapis.com/css?family=Open+Sans:700);
// ============================================ VAR
@width:280px; // size control // diametro
@height:100px;
@R:(@width/2); // radio
@transcolor:transparent;
@transback:rgb(235,106,2);
@background:rgb(128,128,128); //button background
@color: rgba(235,106,2, 5); // box-shadow color
@blur: 8px; // box-shadow blur
@spread:3px; // box-shadow spread
@A: 4s; // accelerate
html,
body{
height:100%;
}
body{
background:rgb(255,255,244);
overflow:hidden;
}
.button{
background:@background;
color:rgb(0,0,0);
position:relative;
top:50%; left:50%;
margin-left:-@R;
margin-top:-@R;
width:@width;
height:@height;
text-align:center;
font-family: 'Open Sans', sans-serif;
font-size:@R/2;
line-height:@height;
-webkit-font-smoothing: antialiased;
}
.button{
border-radius:10px 10px;
animation:button @A linear infinite;
}
@keyframes button{
0%{
background:@color;
-webkit-box-shadow : 0 0 @blur @spread @color;
-moz-box-shadow : 0 0 @blur @spread @color;
box-shadow : 0 0 @blur @spread @color;
}
50%{
background:@background;
-webkit-box-shadow : 0 0 0 @transcolor;
-moz-box-shadow : 0 0 0 @transcolor;
box-shadow : 0 0 0 @transcolor;
}
100%{
background:@color;
-webkit-box-shadow : 0 0 @blur @spread @color;
-moz-box-shadow : 0 0 @blur @spread @color;
box-shadow : 0 0 @blur @spread @color;
}
}
<!--
autor: TEUCG
https://twitter.com/teucg
-->
<div class="button">TEUCG</div>