Button by sammykINC
#212121
1/* works only on a dark background with these paremeters*/ 2 3.button { 4 border-radius: 50%; 5 border: none; 6 display: flex; 7 place-items: center; 8 background-color: transparent; 9 cursor: pointer; 10} 11 12.button > svg { 13 border-radius: inherit; 14 padding: 0.5rem; 15 fill: #fff; 16 /* SVG color */ 17 width: 38px; 18 /* default width 32px */ 19 height: 38px; 20 /* default height 32px */ 21} 22 23.button > svg:active { 24 background-color: rgba(65, 65, 65, 0.5); 25} 26 27.button > svg:not(:active) { 28 animation: fadeOut 0.9s; 29} 30 31@keyframes fadeOut { 32 0% { 33 outline: 1px solid rgba(90, 90, 90, 0.5); 34 /* If you use border it will take space inside and slightly move the SVG */ 35 } 36 37 100% { 38 background-color: transparent; 39 } 40} 41
1.3K views
1.3K views
MIT License