9.08.2016

Как сделать кубическую кнопку css3

Как говорится, начнем с начала! А рассказывать буду о верстке классных кубических кнопок. Специально для данного урока подключил подсветку кода на сайт, так что you are welcome!


Давайте сразу начнем с результата работы. https://jsfiddle.net/t59o2rso/

 Демо


Submit
Submit

Начинаем с идеи

А идея заключается в создании ощущения трехмерного пространства за счет вращения кнопки вокруг оси абсцисс (X). Если вообразить кнопку в виде трехмерного бруса и представить как он поворачивается на 90 градусов, то мы увидим две его грани. Следовательно потребуется два html элемента для отображения этих граней. Чтобы достичь эффекта трехмерности и вращения понадобятся css3 свойства.

Две грани куба представляют собой кнопку так что обернем их в div с классом btn-cube_button

    Submit
    Submit

А для достижения эффекта трехмерности и анимации css3  предоставляет специальные свойства. 
transform-style: preserve-3d;
transition: all 0.3s ease 0s;
transform-origin: 50% 0 0;

Первое свойство, - transform-style создает внутри тега которому присвоено трехмерное пространство. Второе свойство, - transition задает правила анимации. И последнее свойство, - transform-origin смещает ось абсцисс (X) к верхней границе нашей кнопки (это ось вокруг которой будет вращаться кнопка).

Теперь когда вращающаяся часть готова нужно подумать о запуске нашей анимации. Запуск будет происходить по наведения (hover). Здесь существует первый нюанс. Нельзя повесить правила наведения прямо на <div class="btn-cube_button"> потому что в процессе трансформации дочерние элементы изменяются в размере. В итоге будет получено некорректное поведение в некоторых браузерах. Решит эту проблема обертка вокруг кнопки.

Опишем компонент по БЭМ

Определившись с идеей легко описать кнопку в html. Назовем компонент btn-cube, внутри него находится первый компонент - обертка btn-cube__wraper, внутри обертки сама конпка btn-cube__button и еще глубже грани кнопки btn-cube__btn-def и btn-cube__btn-act.

btn-cube
    btn-cube__wraper 
        btn-cube__button 
            btn-cube__btn-def 
            btn-cube__btn-act  










Submit
            Submit

В итоговом HTML помимо описанных выше элементов есть специальные бамперы btn-cube__bumper. Они нужны для устранения "дергатни" кнопки при попадании мыши на верхнюю или нижнюю границу кнопки и по большому счету не обязательны к использованию.

Добавим CSS

Перед тем как показать итоговый css осталось отметить одну деталь. Как уже было сказано ранее, специальное свойство css3 transform-style: preserve-3d создает внутри контейнера 3d пространство. Для правильного отображения нашего куба нужно поместить одну грань под другой и нижнюю грань повернуть на 90 градусов. Таким образом она станет невидимой до тех пор пока куб не начнет поворачиваться.
.btn-cube .btn-cube__btn-act {
    background: #000 none repeat scroll 0 0;
    color: #fff;
    left: 0;
    position: absolute;
    top: 100%;
    transform: rotateX(-90deg);
    transform-origin: 50% 0 0;
}

Итоговый HTML и CSS

HTML:









Submit
            Submit
CSS:
.btn-cube {
    display: inline-block;
    position: relative;
}
.btn-cube__bumper {
    position: absolute;
    z-index: 1000;
}
.btn-cube__bumper-bottom {
    background: transparent;
    height: 6px;
    left: 0;
    right: 0;
}
.btn-cube__bumper-top {
    background: transparent;
    height: 6px;
    left: 0;
    right: 0;
    top: -6px;
}
.btn-cube__wraper {
    display: inline-block;
    cursor: pointer;
}
.btn-cube__button {
    display: inline-block;
    position: relative;
    transform: rotateX(0deg) translateY(0%);
    transform-style: preserve-3d;
    transition: all 0.3s ease 0s;
    transform-origin: 50% 0 0;
}
.btn-cube > .btn-cube__wraper > .btn-cube__button > .btn-cube__btn {
    padding: 10px 15px;
    display: inline-block;
    cursor: pointer;
}
.btn-cube .btn-cube__btn-def {
    transform: rotateX(0deg);
    background: #fff;
    color: #000;
}
.btn-cube .btn-cube__btn-act {
    background: #000 none repeat scroll 0 0;
    color: #fff;
    left: 0;
    position: absolute;
    top: 100%;
    transform: rotateX(-90deg);
    transform-origin: 50% 0 0;
}
.btn-cube__wraper:hover > .btn-cube__button, 
.btn-cube.btn-cube__active > .btn-cube_wraper {
    transform: rotateX(90deg) translateY(-50%);
}

В заключении

Ссылка на полный код https://jsfiddle.net/t59o2rso/
и ссылка на сайт для вдохновения, как можно применить данный эффект http://livedemo00.template-help.com/joomla_51399/
Отметить: