Лого www.SiteHere.ru

Потрясающая анимированная 3D кнопка на CSS3

Потрясающая анимированная 3D кнопка на CSS3

Сегодня я хочу показать вам, как использовать некоторые из удивительных возможностей CSS3 для создания анимированной трехмерной кнопки.

Вы можете увидеть правильное отображение в браузере Chrome. К сожалению Firefox, например, не показывает последнее свойство(3D искажение).

Пример анимированной кнопки можно увидеть здесь:

Посмотреть примерСкачать

HTML часть

В коде HTML у нас будет только ссылка и ничего более, всё остальное мы допишем в CSS:

1
    <a href="#" class="button">Клик</a>

CSS часть

Для начала зададим фон страницы, чтобы кнопка на ней смотрелась более изящно. И дадим основные свойства для кнопки, чтобы она приняла определенную форму и цвет.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
body {
    font-family: Helvetica, Arial, sans-serif;
    background: #d6d6d6;
    text-align: center;
    padding: 50px 0px;
}
 
.button {
    display: inline-block;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    background-color: #538fbe;
    padding: 20px 70px;
    font-size: 24px;
    border: 1px solid #2d6898;
}

Здесь нет пока что ничего особенного. Просто кнопка и основные стили. А вот дальше добавим градиент…

Применили основные свойства

CSS3 градиент

Для того чтобы градиент мы я не буду писать с нуля, а лишь сгенерирую через Gradient Generator чтобы сократить время. Вы также можете воспользоваться таким же сервисом(подробнее какие сервисы бывают вы найдете в моей статье здесь).

Затем с помощью этих цветов для создания градиента: #609bcb(Первый цвет) и #4a85b5(Второй цвет). Большая ошибка начинающих веб-дизайнеров делать градиент очень резким. Мы же просто хотим добавить легкий эффект объема.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.button {
    display: inline-block;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    background-color: #538fbe;
    padding: 20px 70px;
    font-size: 24px;
    border: 1px solid #2d6898;
    background-image: linear-gradient(bottom, rgb(73,132,180) 0%, rgb(97,155,203) 100%);
    background-image: -o-linear-gradient(bottom, rgb(73,132,180) 0%, rgb(97,155,203) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(73,132,180) 0%, rgb(97,155,203) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(73,132,180) 0%, rgb(97,155,203) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(73,132,180) 0%, rgb(97,155,203) 100%);
 
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(73,132,180)),
        color-stop(1, rgb(97,155,203))
    );
}

Затем необходимо добавить стиль при наведении на кнопку. Сделаем кнопку более светлой при наведении. Для этого используем еще раз градиент:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.button:hover {
    background-image: linear-gradient(bottom, rgb(79,142,191) 0%, rgb(102,166,214) 100%);
    background-image: -o-linear-gradient(bottom, rgb(79,142,191) 0%, rgb(102,166,214) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(79,142,191) 0%, rgb(102,166,214) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(79,142,191) 0%, rgb(102,166,214) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(79,142,191) 0%, rgb(102,166,214) 100%);
 
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(79,142,191)),
        color-stop(1, rgb(102,166,214))
    );
}

Кнопка при наведении

На изображении выше видно легкий градиент и эффект при наведении на кнопку.

Острые края выглядят не очень красиво. Давайте немного закруглим их:

1
2
3
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

Эти три строки делают закругление в 5 пикселей(px) в разных браузерах(при этом и старых также). Не делайте радиус слишком большим, потому кнопка будет выглядеть немного странно.

Закругление

Вот как выглядит наша кнопка на данный момент.

Добавим тени

Сейчас, чтобы текст сделать частью этой кнопки, применим для текста тень:

1
    text-shadow: 0px  -1px 0px rgba(0,0,0,.5);

Далее добавим тень нашей кнопке:

1
2
3
    -webkit-box-shadow: 0px 6px 0px #2b638f;
    -moz-box-shadow: 0px 6px 0px #2b638f;
    box-shadow: 0px 6px 0px #2b638f;

И немного усовершенствуем наш код, добавив тени в определенные места, для того чтобы кнопка стала объемной:

1
2
3
    -webkit-box-shadow: 0px 6px 0px #2b638f, 0px 3px 15px rgba(0,0,0,.4);
    -moz-box-shadow: 0px 6px 0px #2b638f, 0px 3px 15px rgba(0,0,0,.4);
    box-shadow: 0px 6px 0px #2b638f, 0px 3px 15px rgba(0,0,0,.4);

Сейчас у нашей кнопки присутствует эффект объема. Вы можете убедиться в этом на изображении ниже:

Добавили тень

Еще больше теней

Добавим еще теней для более реалистичного отображения кнопки:

1
2
3
    -webkit-box-shadow: 0px 6px 0px #2b638f, 0px 3px 15px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5);
    -moz-box-shadow: 0px 6px 0px #2b638f, 0px 3px 15px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5);
    box-shadow: 0px 6px 0px #2b638f, 0px 3px 15px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5);

В итоге получили:

Тень и объем

Анимация при клике

Сейчас при нажатии на кнопку ничего не происходит. Поэтому ей нужно написать определенные свойства, чтобы при нажатии создавался эффект объема:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.button:active {
    background-image: linear-gradient(bottom, rgb(88,154,204) 0%, rgb(90,150,199) 100%);
    background-image: -o-linear-gradient(bottom, rgb(88,154,204) 0%, rgb(90,150,199) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(88,154,204) 0%, rgb(90,150,199) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(88,154,204) 0%, rgb(90,150,199) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(88,154,204) 0%, rgb(90,150,199) 100%);
 
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(88,154,204)),
        color-stop(1, rgb(90,150,199))
    );
}

Добавим тени, для большей реалистичности:

1
2
3
    -webkit-box-shadow: 0px 2px 0px #2b638f, 0px 1px 6px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5);
    -moz-box-shadow: 0px 2px 0px #2b638f, 0px 1px 6px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5);
    box-shadow: 0px 2px 0px #2b638f, 0px 1px 6px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5);

Изменение размера формы при нажатии

При нажатии на кнопку, чтобы сохранить эффект объема, необходимо уменьшить тень:

1
2
3
    -webkit-transform: translate(0, 4px);
    -moz-transform: translate(0, 4px);
    transform: translate(0, 4px);

Добавляем анимацию при нажатии

Сейчас после нажатия, кнопка возвращается в исходное положение очень быстро. Замедлим это действие, для того чтобы сделать более красивый эффект:

1
2
3
    -webkit-transition: all .1s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;

Сейчас кнопка приходит в исходное состояние как мы и хотели.

Немного 3D

Мы можем сделать кнопку еще более необычной, добавив ей свойства 3D преобразования:

1
2
3
4
body {-webkit-perspective: 400;
}

Жаль это свойство не работает во всех браузерах как надо.

И последнее что мы сделаем, это добавим эффект для кнопки:

1
2
3
4
.button {-webkit-transform: rotateX(20deg);
}

Сейчас создается впечатление что кнопка действительно находится в трехмерном измерении(тестируйте в браузере Chrome):

3D искажение

Выводы

В течение данной статьи мы создали очень красивую анимированную 3D кнопку с помощью чистого CSS3 без применения Javascript. Безусловно такие кнопки повышают качество сайта. Используйте ее 🙂

Успехов!

Источник: designmodo.com

Потрясающая анимированная 3D кнопка на CSS3 4.33/5 (86.67%) 6 голос(ов)

Понравилась статья - расскажи друзьям! :)

3 комментария к записи
  • Сергей

    Добрый день.
    Интересная статья, однако сразу возникают вопросы, как сделать подобную кнопку 3-D из двух картинок?

     
    • Юрий Немец

      Из картинок сделать не проблема, а вот в статье это сделано с помощью CSS!

       
  • bd-ibis@yandex.ru

    если уменьшить размер кнопки в 3 раза, то верхняя её часть от надписи до верхнего края перестаёт быть активной, видно по указателю мыши, а так все красиво

     

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *