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

index.html

<!-- 
autor: TEUCG 
https://twitter.com/teucg
-->

<div class="button">TEUCG</div>

style.less

@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;
  }


}