<!-- 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;
}
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.