CSS Кнопка №19 - пример кода

Демо

3,65 КБ
HTML, CSS
Кнопка
Лицензия MIT

Код
Редактор

HTML

<button class="coin-btn">Монета</button>

CSS

.coin-btn {
    font-family: Arial;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
    position: relative;
    border: none;
    width: 100px;
    height: 100px;
    font-size: 24px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    line-height: 1em;
    -webkit-box-shadow: inset 0 0 10px #0008, inset 2px 2px 4px #5d4b3099, inset 0px 0px 10px #5d4b3099, inset 8px -8px 30px #40432999;
    -moz-box-shadow: inset 0 0 10px #0008, inset 2px 2px 4px #5d4b3099, inset 0px 0px 10px #5d4b3099, inset 8px -8px 30px #40432999;
    box-shadow: inset 0 0 10px #0008, inset 2px 2px 4px #5d4b3099, inset 0px 0px 10px #5d4b3099, inset 8px -8px 30px #40432999;
    color: #9d8657;
    text-shadow: -1px -1px 0px #dfc790, 1px 1px 0px #67511f, 1px 1px 5px #67511f;
    font-weight: bold;
    background-color: #9f8858;
    background: -webkit-linear-gradient(309deg, #b19a68 0%, #756142 2%, #a18658 16%, #b79b61 38%, #7f6b3c 60%);
    background: -moz-linear-gradient(309deg, #b19a68 0%, #756142 2%, #a18658 16%, #b79b61 38%, #7f6b3c 60%);
    background: -o-linear-gradient(309deg, #b19a68 0%, #756142 2%, #a18658 16%, #b79b61 38%, #7f6b3c 60%);
    background: linear-gradient(141deg, #b19a68 0%, #756142 2%, #a18658 16%, #b79b61 38%, #7f6b3c 60%);
}

@-webkit-keyframes coin {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 400% 400%;
    }
}

@-moz-keyframes coin {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 400% 400%;
    }
}

@-o-keyframes coin {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 400% 400%;
    }
}

@keyframes coin {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 400% 400%;
    }
}
.coin-btn::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    content: "";
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    z-index: -1;
    background: -webkit-linear-gradient(295deg, #bfac82 0%, #fff4e2 12%, #fff4e2 18%, #c1a364 32%, #d1b36e 60%);
    background: -moz-linear-gradient(295deg, #bfac82 0%, #fff4e2 12%, #fff4e2 18%, #c1a364 32%, #d1b36e 60%);
    background: -o-linear-gradient(295deg, #bfac82 0%, #fff4e2 12%, #fff4e2 18%, #c1a364 32%, #d1b36e 60%);
    background: linear-gradient(155deg, #bfac82 0%, #fff4e2 12%, #fff4e2 18%, #c1a364 32%, #d1b36e 60%);
    -webkit-background-size: 400% 400%;
    -moz-background-size: 400%;
    -o-background-size: 400%;
    background-size: 400%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-animation: coin 16s linear infinite;
    -moz-animation: coin 16s linear infinite;
    -o-animation: coin 16s linear infinite;
    animation: coin 16s linear infinite;
    -webkit-box-shadow: 3px 6px 2px 2px #1a140e99, 3px 6px 14px #1a140e99;
    -moz-box-shadow: 3px 6px 2px 2px #1a140e99, 3px 6px 14px #1a140e99;
    box-shadow: 3px 6px 2px 2px #1a140e99, 3px 6px 14px #1a140e99;
}
.coin-btn::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    content: "";
    position: absolute;
    display: block;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 9px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border-bottom: 1px solid #ffffff36;
    border-top: 1px solid #411e0475;
}

HTML
CSS

Предоставленный фрагмент кода создает визуально привлекательную, интерактивную кнопку, оформленную в стиле монеты с использованием HTML и CSS. В его основе HTML часть состоит из одного элемента кнопки с атрибутом класса, установленным в «coin-btn». Эта простота в HTML заложила основу для более сложного визуального стиля, применяемого через CSS.

В разделе CSS класс «.coin-btn» определен с использованием различных свойств, которые способствуют внешнему виду и интерактивности кнопки. Среди этих свойств заметно использование box-shadow и text-shadow для придания кнопке трехмерного вида и эффекта светящегося текста. Тени создают иллюзию глубины, заставляя кнопку выделяться, как будто она тиснена на экране. Использование border-radius, установленного в 50%, преобразует форму кнопки в идеальный круг, усиливая ее сходство с монетой.

Кроме того, код использует CSS анимации @keyframes для добавления динамичного визуального эффекта к кнопке, имитируя изменяющиеся отражения и блеск движущейся монеты. Эти анимации активируются изменениями позиции фона кнопки со временем, создавая завораживающий и непрерывный эффект движения. Это сочетание свойств CSS и анимаций не только делает кнопку визуально привлекательной, но и приглашает к взаимодействию, воплощая в себе сочетание эстетической привлекательности и функциональности.