پیشنمایش زنده
کد HTML
<button class="button">
<svg viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
<path d="M140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128ZM128,72a12,12,0,1,0-12-12A12,12,0,0,0,128,72Zm0,112a12,12,0,1,0,12,12A12,12,0,0,0,128,184Z"></path></svg>
</button>
کد CSS
/* works only on a dark background with these paremeters*/
.button {
border-radius: 50%;
border: none;
display: flex;
place-items: center;
background-color: transparent;
cursor: pointer;
}
.button > svg {
border-radius: inherit;
padding: 0.5rem;
fill: #fff;
/* SVG color */
width: 38px;
/* default width 32px */
height: 38px;
/* default height 32px */
}
.button > svg:active {
background-color: rgba(65, 65, 65, 0.5);
}
.button > svg:not(:active) {
animation: fadeOut 0.9s;
}
@keyframes fadeOut {
0% {
outline: 1px solid rgba(90, 90, 90, 0.5);
/* If you use border it will take space inside and slightly move the SVG */
}
100% {
background-color: transparent;
}
}