Audio Options
CODE
×
HTML
<div class='audio-options-box'><div class="audio-options-1"> <a href="#" class="audio-volume"> <i class="speaker-icon"></i> <span>Lautstärke</span> </a> <a href="#" class="audio-download"> <i class="download-icon"></i> <span>Herunterladen</span> </a> <a href="#" class="audio-share"> <i class="share-icon"></i> <span>Link teilen</span> </a> </div> <div class="audio-options-2"> <div class="volume"> <div class="volume-bar"></div> <div class="volume-handle"></div> </div> </div> <div class="audio-options-3"> <input type="text" value="Link-to-this-page-and-open-lightbox.html"> </div></div>
CSS
div.audio-options-box { font-family: 'Roboto'; font-style: normal; font-weight: 500; font-size: 12px; line-height: 18px; letter-spacing: 0; word-spacing: 0; line-height: 100%; background-color: var(--white); color: var(--black); -webkit-box-shadow: 1px 1px 15px -1px rgba(0,0,0,0.25); -moz-box-shadow: 1px 1px 15px -1px rgba(0,0,0,0.25); box-shadow: 1px 1px 15px -1px rgba(0,0,0,0.25); padding-top: 20px; padding-right: 10px; padding-bottom: 20px; padding-left: 10px; } div.volume { width: 100px; height: 24px; background: transparent; display: inline-flex; align-items: center; margin: 20px 20px 0 15px; position: relative; flex: none; } div.volume-bar { width: 100px; height: 8px; background: #ccc; border-radius: 4px; position: absolute; } div.volume-handle { width: 18px; height: 18px; background: #000; border-radius: 50%; position: absolute; z-index: +1; transform: translateX(10px); } div.audio-options-box { display: block; } div.audio-options-1 { display: table; } div.audio-options-2 { display: none; width: 100%; text-align: center; } div.audio-options-3 { display: block; width: 100%; } div.table-cell { display: table-cell; } div.audio-options-box input { padding: 12px; height: 32px; margin: 24px 0 6px 0; font-size: 12px; background-color: #f0f0f0; border: none; } div.audio-options-box a { display: table-cell; padding: 0 15px; text-align: center; text-decoration: none; } div.audio-options-box i { width: 36px; height: 36px; background-color: transparent; display: inline-block; margin-bottom: 6px; } div.audio-options-box span { display: block; font-weight: 500; white-space: nowrap; } div.audio-options-box a > i { -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; } div.audio-options-box a:hover > i { -webkit-transform: scale(1.07); -ms-transform: scale(1.07); transform: scale(1.07); } div.audio-options-box a:hover > span { text-decoration: underline; }
JS
Audio Options
Erstellt: 21.07.2021 - 15:12 Uhr
Letzte Änderung: 25.07.2021 - 16:09 Uhr
×
Lautstärke
Herunterladen
Link teilen