Module «btn-play». Play button for videos.

Source:

https://html.ildar-meyker.ru/html-kgeu/components.html?tab=tab-buttons

Демо:

Плагины:

Подключение:

//

Разметка:

//

<a href="#" class="btn-play">
    <svg class="icon">
        <use
            xlink:href="img/icons/general/sprite.svg#play"
        ></use>
    </svg>
</a>

Стили:

//

.btn-play {
    @extend .reset-btn;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1em;
    height: 1em;
    font-size: clamp(6rem, 20vw, 14rem);
    color: #fff;

    &:hover {
        &:before {
            transform: scale(1.1);
            background: rgba(#fff, 0.2);
        }
    }

    &:before {
        content: " ";
        @include fill;
        transition: all 0.2s;
        background: rgba(#fff, 0.15);
        border-radius: 50%;
    }

    .icon {
        transform: translateX(0.1em);
        font-size: calc(34 / 140) + em;
    }
}

@media (max-width: 999.98px) {
    .btn-play {
        &:hover {
            &:before {
            }
        }

        &:before {
        }

        .icon {
        }
    }
}

Инициализация:

//