<!-- Font Awesome CDN -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
    <body class="text-center">
      <h1>Pure CSS Ripple Animation</h1>
      <div class="">
        <i class="fas fa-camera-retro fa-5x ripple"></i>
      </div>
    </body>



body {
  background-color: #0336b7;
}
.fas { 
  color: #fff;
  padding-top: 4.5rem;
}
h1 {
  color: #fff;
  font-family: 'Oswald';
  margin: 70px;
  text-align: center;
}
/* Ripple effect */
.ripple {
  background-position: center;
  transition: background 1.2s;
  height: 250px;
  width: 250px;
  border-radius: 125px;
}
.ripple:hover {
  background: #0336b7 radial-gradient(circle, transparent 1%, #0336b7 1%) center/15000%;
  text-shadow: 1px 1px 7px #030303;
}
.ripple:active {
  background-color: #6eb9f7;
  background-size: 100%;
  transition: background 0s;
}
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css

External JavaScript

This Pen doesn't use any external JavaScript resources.