A Pen by Franklin Gitonga.

index.html

<div class="wrapper"><span class="wave"><span class="wave"><span class="wave"><a href="#" class="smooth-scroll"><span></span></a></span></span></span></div>

style.scss

body{
  background: #002b36;
}

.wrapper {
  margin: 50px auto 0;
  text-align: center;
}

.wrapper * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

a {
width: 105px;
height: 105px;
display: block;
margin: 0 auto;
-webkit-border-radius: 200px;
-moz-border-radius: 200px;
border-radius: 200px;
background-color: yellow;
background-repeat: no-repeat;
background-position: center center;
-webkit-box-shadow: 0 0 4px rgba(0,0,0,0.3),inset 0 1px 1px rgba(250,250,250,0.4);
-moz-box-shadow: 0 0 4px rgba(0,0,0,0.3),inset 0 1px 1px rgba(250,250,250,0.4);
box-shadow: 0 0 4px rgba(0,0,0,0.3),inset 0 1px 1px rgba(250,250,250,0.4);
text-align: center;
text-decoration: none;
}


.wave {
display: inline-block;
margin: 0 auto;
padding: 5px;
-webkit-border-radius: 200px;
-moz-border-radius: 200px;
border-radius: 200px;
border: 0 solid rgba(255,255,255,0);
line-height: 0;
}

.wave {
-webkit-transition: border-color 500ms ease 300ms,border-width 400ms ease 200ms;
-moz-transition: border-color 500ms ease 300ms,border-width 400ms ease 200ms;
transition: border-color 500ms ease 300ms,border-width 400ms ease 200ms;
}

.wave > .wave {
-webkit-transition: border-color 400ms ease 200ms,border-width 300ms ease 100ms;
-moz-transition: border-color 400ms ease 200ms,border-width 300ms ease 100ms;
transition: border-color 400ms ease 200ms,border-width 300ms ease 100ms;
}

.wave > .wave > .wave {
-webkit-transition: border-color 300ms ease 100ms,border-width 200ms ease 0;
-moz-transition: border-color 300ms ease 100ms,border-width 200ms ease 0;
transition: border-color 300ms ease 100ms,border-width 200ms ease 0;
}

.wave:hover {
border-width: 3px;
border-color: rgba(255,255,255,0.1);
}

.wave:hover > .wave {
border-width: 4px;
border-color: rgba(255,255,255,0.2);
}

.wave:hover > .wave > .wave {
border-width: 5px;
border-color: rgba(255,255,255,0.3);
}

Wave.markdown

Wave

A Pen by Franklin Gitonga on CodePen.

License.