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

Демо

7,23 КБ
HTML, CSS, JS
Кнопка
Лицензия MIT

Код
Редактор

HTML

<div class="container">
    <div class="button">
        <div class="left-click-trigger"></div>
        <div class="right-click-trigger"></div>
        <div class="switch">
            <div class="inner"></div>
        </div>
        <div class="icon-on"></div>
        <div class="icon-off"></div>
    </div>
</div>

CSS

.button {
    -webkit-box-shadow: -4px -4px 20px rgba(255, 255, 255, 0.15), 4px 4px 20px rgba(0, 0, 0, 0.9);
    -moz-box-shadow: -4px -4px 20px rgba(255, 255, 255, 0.15), 4px 4px 20px rgba(0, 0, 0, 0.9);
    box-shadow: -4px -4px 20px rgba(255, 255, 255, 0.15), 4px 4px 20px rgba(0, 0, 0, 0.9);
}

html,
body {
    margin: 0;
    padding: 0;
}

.container {
    background: #1c1c1e;
    width: 100vw;
    height: 100vh;
    position: relative;
}
.container .button {
    cursor: pointer;
    background: -webkit-linear-gradient(320deg, #212123, #171719);
    background: -moz-linear-gradient(320deg, #212123, #171719);
    background: -o-linear-gradient(320deg, #212123, #171719);
    background: linear-gradient(130deg, #212123, #171719);
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 300px;
    height: 140px;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    border-radius: 150px;
}
.container .button .left-click-trigger,
.container .button .right-click-trigger {
    position: absolute;
    left: 0;
    z-index: 50;
    width: 50%;
    height: 100%;
    top: 0;
}
.container .button .right-click-trigger {
    left: 50%;
}
.container .button .switch {
    background: -webkit-gradient(linear, left top, right top, from(#2b2b2e), to(#0d0d0e));
    background: -webkit-linear-gradient(left, #2b2b2e, #0d0d0e);
    background: -moz-linear-gradient(left, #2b2b2e, #0d0d0e);
    background: -o-linear-gradient(left, #2b2b2e, #0d0d0e);
    background: linear-gradient(90deg, #2b2b2e, #0d0d0e);
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    border-radius: 150px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 80%;
    height: 70%;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.container .button .switch .inner {
    background: -webkit-gradient(linear, left top, right top, color-stop(45%, #171719), color-stop(55%, #212123));
    background: -webkit-linear-gradient(left, #171719 45%, #212123 55%);
    background: -moz-linear-gradient(left, #171719 45%, #212123 55%);
    background: -o-linear-gradient(left, #171719 45%, #212123 55%);
    background: linear-gradient(90deg, #171719 45%, #212123 55%);
    width: 94%;
    height: 100%;
    -webkit-transition: 0.5s cubic-bezier(0.9, 0, 0, 1);
    -o-transition: 0.5s cubic-bezier(0.9, 0, 0, 1);
    -moz-transition: 0.5s cubic-bezier(0.9, 0, 0, 1);
    transition: 0.5s cubic-bezier(0.9, 0, 0, 1);
    position: absolute;
    left: 6%;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    border-radius: 150px;
}
.container .button .switch .inner::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: -webkit-gradient(linear, left top, right top, color-stop(45%, #212123), color-stop(55%, #171719));
    background: -webkit-linear-gradient(left, #212123 45%, #171719 55%);
    background: -moz-linear-gradient(left, #212123 45%, #171719 55%);
    background: -o-linear-gradient(left, #212123 45%, #171719 55%);
    background: linear-gradient(90deg, #212123 45%, #171719 55%);
    -webkit-transition: 0.5s cubic-bezier(0.9, 0, 0, 1);
    -o-transition: 0.5s cubic-bezier(0.9, 0, 0, 1);
    -moz-transition: 0.5s cubic-bezier(0.9, 0, 0, 1);
    transition: 0.5s cubic-bezier(0.9, 0, 0, 1);
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    border-radius: 150px;
    opacity: 0;
}
.container .button .icon-on {
    position: absolute;
    top: 50%;
    left: 70%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background: #a1f1f2;
    width: 5px;
    height: 30px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: 0 0 30px 2px rgba(161, 241, 242, 0.8);
    -moz-box-shadow: 0 0 30px 2px rgba(161, 241, 242, 0.8);
    box-shadow: 0 0 30px 2px rgba(161, 241, 242, 0.8);
    -webkit-transition: 0.5s cubic-bezier(0.9, 0, 0, 1);
    -o-transition: 0.5s cubic-bezier(0.9, 0, 0, 1);
    -moz-transition: 0.5s cubic-bezier(0.9, 0, 0, 1);
    transition: 0.5s cubic-bezier(0.9, 0, 0, 1);
}
.container .button .icon-off {
    position: absolute;
    top: 50%;
    left: 33%;
    -webkit-transform: translate(-45%, -50%) rotate3d(0, 1, 0, 25deg);
    -moz-transform: translate(-45%, -50%) rotate3d(0, 1, 0, 25deg);
    transform: translate(-45%, -50%) rotate3d(0, 1, 0, 25deg);
    background: #171719;
    width: 25px;
    height: 25px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-transition: 0.5s cubic-bezier(0.9, 0, 0, 1);
    -o-transition: 0.5s cubic-bezier(0.9, 0, 0, 1);
    -moz-transition: 0.5s cubic-bezier(0.9, 0, 0, 1);
    transition: 0.5s cubic-bezier(0.9, 0, 0, 1);
    -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.8), inset 0 0 15px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 0 30px rgba(0, 0, 0, 0.8), inset 0 0 15px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.8), inset 0 0 15px rgba(0, 0, 0, 0.5);
    border: 5px solid #2d2d30;
}
.container .button.off .icon-on {
    left: 67%;
    -webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.9);
    -moz-box-shadow: 0 0 25px rgba(0, 0, 0, 0.9);
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.9);
    background: #2d2d30;
    -webkit-transform: translate(-50%, -50%) rotate3d(0, 1, 0, 25deg);
    -moz-transform: translate(-50%, -50%) rotate3d(0, 1, 0, 25deg);
    transform: translate(-50%, -50%) rotate3d(0, 1, 0, 25deg);
}
.container .button.off .icon-off {
    left: 30%;
    background: #212123;
    border-color: #f2a2a1;
    -webkit-box-shadow: 0 0 30px rgba(242, 162, 161, 0.8), inset 0 0 15px rgba(242, 162, 161, 0.5);
    -moz-box-shadow: 0 0 30px rgba(242, 162, 161, 0.8), inset 0 0 15px rgba(242, 162, 161, 0.5);
    box-shadow: 0 0 30px rgba(242, 162, 161, 0.8), inset 0 0 15px rgba(242, 162, 161, 0.5);
    -webkit-transform: translate(-50%, -50%) rotate3d(0, 1, 0, 0deg);
    -moz-transform: translate(-50%, -50%) rotate3d(0, 1, 0, 0deg);
    transform: translate(-50%, -50%) rotate3d(0, 1, 0, 0deg);
}
.container .button.off .switch .inner {
    left: 0;
}
.container .button.off .switch .inner::after {
    opacity: 1;
}

$(".left-click-trigger").click(function (e) {
  $(".button").addClass("off");
});
$(".right-click-trigger").click(function (e) {
  $(".button").removeClass("off");
});

HTML
CSS
JS

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

Начиная с HTML, он определяет структурированную компоновку с элементом div, который классифицируется как «контейнер» и включает в себя другой div с классом «кнопка». Эта кнопка дополнительно разбивается на меньшие div элементы для специфических функций, таких как триггеры для левого и правого клика и переключатель с внутренней частью, включая иконки для состояний «включено» и «выключено». Эта структура служит каркасом нашего интерактивного компонента, обеспечивая четкую иерархию и организацию визуальных элементов, которые мы будем стилизовать и анимировать.

Переходя к CSS, магия стилизации вступает в игру, особенно с использованием свойства box-shadow для добавления глубины и размерности элементам. Свойство box-shadow используется несколько раз для разных элементов, создавая ощущение реализма через тонкие тени и световые эффекты. Например, оно применяется к «кнопке», чтобы придать ей вид нажатой или парящей в зависимости от имитации источника света, улучшая визуальный опыт пользователя. Использование градиентов, скругленных углов и переходов в сочетании с box-shadow дополнительно способствует эстетической привлекательности и интерактивности кнопки, делая ее не только визуально привлекательной, но и отзывчивой на действия пользователя с плавными анимациями.

JavaScript связывает все вместе, добавляя интерактивность кнопке. Он отслеживает события клика по левому и правому триггерам, динамически добавляя или удаляя класс «off» в зависимости от взаимодействия. Этот простой, но эффективный скрипт позволяет переключаться между состояниями «включено» и «выключено», демонстрируя, как HTML, CSS и JavaScript работают в гармонии для создания интерактивных веб-компонентов. Использование jQuery для обработки событий упрощает процесс, делая код более читабельным и легким для поддержки.

В сущности, этот фрагмент кода является прекрасным примером того, как сочетание структуры HTML, стилизации CSS и функциональности JavaScript может произвести впечатляющий пользовательский интерфейсный компонент, который одновременно красив и интерактивен.