<div>
<svg viewBox="0 0 512 512" width="100" title="arrow-alt-circle-right">
<path d="M256 8c137 0 248 111 248 248S393 504 256 504 8 393 8 256 119 8 256 8zM140 300h116v70.9c0 10.7 13 16.1 20.5 8.5l114.3-114.9c4.7-4.7 4.7-12.2 0-16.9l-114.3-115c-7.6-7.6-20.5-2.2-20.5 8.5V212H140c-6.6 0-12 5.4-12 12v64c0 6.6 5.4 12 12 12z" />
</svg>
<svg viewBox="0 0 512 512" width="100" title="arrow-alt-circle-right">
<path d="M256 8c137 0 248 111 248 248S393 504 256 504 8 393 8 256 119 8 256 8zM140 300h116v70.9c0 10.7 13 16.1 20.5 8.5l114.3-114.9c4.7-4.7 4.7-12.2 0-16.9l-114.3-115c-7.6-7.6-20.5-2.2-20.5 8.5V212H140c-6.6 0-12 5.4-12 12v64c0 6.6 5.4 12 12 12z" />
</svg>
</div>
<svg height="0" width="0">
<filter id='shadow' color-interpolation-filters="sRGB">
<feDropShadow dx="2" dy="2" stdDeviation="3" flood-opacity="0.5" />
</filter>
</svg>
body {
height: 100vh;
margin: 0;
display: grid;
grid-template-rows: 1fr 1fr 1fr;
place-items: center;
background: #eee;
}
svg {
margin: 2rem;
}
div {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
}
div:nth-child(1) {
background: #2196f3;
svg {
fill: #90caf9;
&:hover,
&:nth-child(2) {
filter: url(#shadow);
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.