Audio play-control (active)
CODE
×
HTML
<div class='play-control active'></div>
CSS
div.play-control.active { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTIuNiAxNy4xIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MCB7IGZpbGw6ICMwMDA7IH0NCjwvc3R5bGU+DQo8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTgzLjQ3MSAtMTY3LjAwNSkiPg0KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xODUuOCwxODMuNmMtMS4xLDAtMi0wLjktMi0ydi0xMi4xYzAtMS4xLDAuOS0yLDItMnMyLDAuOSwyLDJ2MTIuMSBDMTg3LjgsMTgyLjcsMTg2LjksMTgzLjYsMTg1LjgsMTgzLjZ6Ii8+DQoJPHBhdGggY2xhc3M9InN0MCIgZD0iTTE5My44LDE4My42Yy0xLjEsMC0yLTAuOS0yLTJ2LTEyLjFjMC0xLjEsMC45LTIsMi0yczIsMC45LDIsMnYxMi4xIEMxOTUuOCwxODIuNywxOTQuOSwxODMuNiwxOTMuOCwxODMuNnoiLz4NCjwvZz4NCjwvc3ZnPg=='); 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; width: 20px; height: 20px; } div.play-control.active:hover, div.play-control.active:focus { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } div.play-control { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMi41OTggMTcuMDY4Ij4NCiAgPGRlZnM+DQogICAgPHN0eWxlPg0KICAgICAgLmNscy0xIHsNCiAgICAgICAgZmlsbDogIzAwMDsNCiAgICAgIH0NCiAgICA8L3N0eWxlPg0KICA8L2RlZnM+DQogIDxwYXRoIGlkPSJfMDE1LXBsYXktYnV0dG9uIiBkYXRhLW5hbWU9IjAxNS1wbGF5LWJ1dHRvbiIgY2xhc3M9ImNscy0xIiBkPSJNMTcuOTIzLDguMiw2LjEzNy4wNzJBLjQwNi40MDYsMCwwLDAsNS41LjQwNlYxNi42NjJBLjQwNi40MDYsMCwwLDAsNi4xMzcsMTdMMTcuOTIzLDguODY4YS40MDYuNDA2LDAsMCwwLDAtLjY2OVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC01LjUpIi8+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; width: 20px; height: 20px; } div.play-control:hover, div.play-control:focus { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); }
JS
Audio play-control (active)
Erstellt: 21.07.2021 - 13:47 Uhr
Letzte Änderung: 21.07.2021 - 14:51 Uhr
×