/* * Pure CSS ripple effect (no JavaScript) * Version - 1.0.0 * Licensed under the MIT license - http://opensource.org/licenses/MIT * Copyright (c) 2021 by Rüdiger Alte (https://codepen.io/drralte/pen/xmzPZe) */.ripple{display:inline-block;position:relative;overflow:hidden;transition:all ease-in-out .25s}.ripple::after{content:"";display:block;position:absolute;top:0;left:25%;height:100%;width:50%;background-color:#000;border-radius:50%;opacity:0;pointer-events:none;transition:all ease-in-out .5s;transform:scale(5,5)}.ripple:active::after{padding:0;margin:0;opacity:.2;transition:0s;transform:scale(0,0)}