Audio Options Icon (active)
CODE
×
HTML
<div class='audio-options active'></div>
CSS
div.audio-options.active { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciICB4PSIwIiB5PSIwIiB2aWV3Qm94PSIwIDAgNCAxOCI+DQogIDxnIGZpbGw9IiM0ZTRlNGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02MzEgLTM0MykiPg0KICAgIDxjaXJjbGUgaWQ9IkVsbGlwc2VfMTgzIiBkYXRhLW5hbWU9IkVsbGlwc2UgMTgzIiBjeD0iMiIgY3k9IjIiIHI9IjIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYzMSAzNDMpIi8+DQogICAgPGNpcmNsZSBpZD0iRWxsaXBzZV8xODQiIGRhdGEtbmFtZT0iRWxsaXBzZSAxODQiIGN4PSIyIiBjeT0iMiIgcj0iMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjMxIDM1MCkiLz4NCiAgICA8Y2lyY2xlIGlkPSJFbGxpcHNlXzE4NSIgZGF0YS1uYW1lPSJFbGxpcHNlIDE4NSIgY3g9IjIiIGN5PSIyIiByPSIyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2MzEgMzU3KSIvPg0KICA8L2c+DQo8L3N2Zz4='); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); width: 20px; height: 20px; } div.audio-options.active:hover, div.audio-options.active:focus { -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); } div.audio-options { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciICB4PSIwIiB5PSIwIiB2aWV3Qm94PSIwIDAgNCAxOCI+DQogIDxnIGZpbGw9IiM0ZTRlNGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02MzEgLTM0MykiPg0KICAgIDxjaXJjbGUgaWQ9IkVsbGlwc2VfMTgzIiBkYXRhLW5hbWU9IkVsbGlwc2UgMTgzIiBjeD0iMiIgY3k9IjIiIHI9IjIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYzMSAzNDMpIi8+DQogICAgPGNpcmNsZSBpZD0iRWxsaXBzZV8xODQiIGRhdGEtbmFtZT0iRWxsaXBzZSAxODQiIGN4PSIyIiBjeT0iMiIgcj0iMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjMxIDM1MCkiLz4NCiAgICA8Y2lyY2xlIGlkPSJFbGxpcHNlXzE4NSIgZGF0YS1uYW1lPSJFbGxpcHNlIDE4NSIgY3g9IjIiIGN5PSIyIiByPSIyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2MzEgMzU3KSIvPg0KICA8L2c+DQo8L3N2Zz4='); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); width: 20px; height: 20px; } div.audio-options:hover, div.audio-options:focus { -webkit-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); }
JS
Audio Options Icon (active)
Erstellt: 22.07.2021 - 10:25 Uhr
Letzte Änderung: 22.07.2021 - 11:08 Uhr
×