Кнопка css3 – Красивые CSS3 кнопки с анимацией и hover эффектами

/*Пример №1*/
<a href="#">Красная flat кнопка</a>
/*Пример №2*/
<a href="#">Бирюзовая flat кнопка</a>
/*Пример №3*/
<a href="#">Оранжевая flat кнопка</a>

.flat1 {
	padding: 15px 24px; //отступы, отвечающие за размеры кнопки (в пикселях)
	font: normal 15px/22px Verdana; //тип, размер, межстрочный интервал и вид шрифта
	text-transform: uppercase; //преобразование текста в заглавные символы
	-webkit-user-select: none;
	border: none;
	text-align: center; //текст кнопки по центру
	outline: none;
	cursor: pointer;
	color: #fff; //цвет текста кнопки в статичном виде
	background-color: #f35958; //цвет кнопки в статичном виде
	display: inline-block;
	/*Тени кнопки в статичном виде*/
	-webkit-box-shadow: 0px 3px 0px #c24746;
	-moz-box-shadow: 0px 3px 0px #c24746;
	box-shadow: 0px 3px 0px #c24746;
	}
	
.flat1:hover {
	background-color: #e65453; //цвет кнопки при наведении
	color: #fff; //цвет текста кнопки при наведении
	border: none;
	}
	
.flat1:active {
	/*Тени кнопки при нажатии*/
	-webkit-box-shadow: 0px 1px 0px #f35958;
	-moz-box-shadow: 0px 1px 0px #f35958;
	box-shadow: 0px 1px 0px #f35958;
	position: relative;
	top: 2px;
	background-color: #e65453; //цвет кнопки при нажатии
	color: #fff; //цвет текста кнопки при нажатии
	}

CSS стили второго примера

.flat2 {
	padding: 15px 24px; //отступы, отвечающие за размеры кнопки (в пикселях)
	font: normal 15px/22px Verdana; //тип, размер, межстрочный интервал и вид шрифта
	text-transform: uppercase; //преобразование текста в заглавные символы
	border: none;
	color: #fff; //цвет текста кнопки в статичном виде
	background-color: #1ABC9C; //цвет кнопки в статичном виде
	-webkit-transition:border .25s linear, color .25s linear,background-color .25s linear;
	transition:border .25s linear, color .25s linear,background-color .25s linear;
	-webkit-font-smoothing: subpixel-antialiased;
	text-align: center; //текст кнопки по центру
	cursor: pointer;
	-webkit-user-select: none;
	display: inline-block;
	}
	
.flat2:hover {
	color: #fff; //цвет текста кнопки при наведении
	background-color: #20D5B1; //цвет кнопки при наведении
	border: none;
	}
	
.flat2:active {
	color: #fff; //цвет текста кнопки при нажатии
	background-color: #179B81; //цвет кнопки при нажатии
	border: none;
	}	

CSS стили третьего примера

.flat-type3 {
	padding: 15px 24px; //отступы, отвечающие за размеры кнопки (в пикселях)
	font: normal 15px/22px Verdana; //тип, размер, межстрочный интервал и вид шрифта
	text-transform: uppercase; //преобразование текста в заглавные символы
	color: #E57332; //цвет текста кнопки в статичном виде
	border: 2px solid #E57332; //размер и цвет рамки/обводки кнопки в статичном виде
	border-radius: 5px; //скругление углов кнопки (в пикселях)
	background-color: #fff; //цвет кнопки в статичном виде
	-webkit-transition:border .25s linear, color .25s linear,background-color .25s linear;
	transition:border .25s linear, color .25s linear,background-color .25s linear;
	-webkit-font-smoothing: subpixel-antialiased;
	text-align: center; //текст кнопки по центру
	cursor: pointer;
	-webkit-user-select: none;
	display: inline-block;
	}
	
.flat3:hover {
	color: #fff; //цвет текста кнопки при наведении
	background-color: #E57332; //цвет кнопки при наведении
	border: 2px solid #E57332; //размер и цвет рамки/обводки кнопки при наведении
	}
	
.flat3:active {
	color: #fff; //цвет текста кнопки при нажатии
	background-color: #FF813A; //цвет кнопки при нажатии
	border: 2px solid #FF813A; //размер и цвет рамки/обводки кнопки при нажатии
	}

ilyakhasanov.ru

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

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

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

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

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

HTML часть

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

1

    <a href="#">Клик</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 кнопку с помощью чистого CSS3 без применения Javascript. Безусловно такие кнопки повышают качество сайта. Используйте ее 🙂

Успехов!

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

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

sitehere.ru

Создаем стильную кнопку, используя только CSS3

Сегодня мы будем рисовать кнопку, используя исключительно CSS. В работе будут использованы градиенты, тени, границы и переходы. Кнопка основана на стандартном стиле, который встречается практически на всех сайтах. Мы выполним ее в закругленном прямоугольном стиле, похожем по форме на табличку. Тексту же на кнопке придадим небольшую тень, чтобы создать впечатление эффекта углубления.

 Финальный результат:

Посмотреть пример кнопки на CSS

Структура HTML

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8" />
<title>CSS3 Button</title>

<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>

<div>

        <a href="#">Push</a>

</div>
</body>
</html>

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

Создание стилей CSS

a.btn {
        display: block; width: 250px; height: 60px;
        padding: 40px 0 0 0; margin: 0 auto;
}

Файл CSS начинается с некоторых основных стилей для подготовки демонстрационного файла, после этого мы можем начать создавать стили для якоря. Якорь по умолчанию строчный, так что display: block; преобразует это в блок, чтобы можно было добавить определенные ширину и высоту. Внутренний отступ оттолкнет текст от верхнего края кнопки, а внешний отступ используется, чтобы отцентровать кнопку в демонстрации.

a.btn {
        display: block; width: 250px; height: 60px; padding: 40px 0 0 0; margin: 0 auto;
        background: #398525; /* old browsers */
        background: -moz-linear-gradient(top, #8DD297 0%, #398525 100%); /* firefox */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8DD297), color-stop(100%,#398525)); /* webkit */
}

Далее мы можем начать создавать стиль кнопки с цветным фоном, тут пригодятся градиенты CSS. Две цветопробы преобразуются в синтаксис градиента для Mozilla и Webkit браузеров, используя удобный генератор градиента CSS, после этого запасная опция однотонного цвета добавляется для не поддерживающих градиент браузеров.

a.btn {
        display: block; width: 250px; height: 60px; padding: 40px 0 0 0; margin: 0 auto;

        background: #398525; /* old browsers */
        background: -moz-linear-gradient(top, #8DD297 0%, #398525 100%); /* firefox */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8DD297), color-stop(100%,#398525)); /* webkit */
        box-shadow: inset 0px 0px 6px #fff;
        -webkit-box-shadow: inset 0px 0px 6px #fff;
        border: 1px solid #5ea617;
        border-radius: 10px;
}

Свойство CSS3 box-shadow может быть использовано после этого, чтобы создать эффект внутреннего свечения, как в Photoshop. Добавление inset  в код разместит свечение внутри элемента, а не снаружи. Мы не сдвигаем тени по каким-либо осям, но мы размазываем их на 6px, чтобы смягчить влияние эффекта.

Простая зеленая граница шириной 1px обрамляет кнопку, после чего углы удаляются, используя свойство border-radius.

a.btn {
        display: block; width: 250px; height: 60px; padding: 40px 0 0 0; margin: 0 auto;

        background: #398525; /* old browsers */
        background: -moz-linear-gradient(top, #8DD297 0%, #398525 100%); /* firefox */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8DD297), color-stop(100%,#398525)); /* webkit */

        box-shadow: inset 0px 0px 6px #fff;
        -webkit-box-shadow: inset 0px 0px 6px #fff;
        border: 1px solid #5ea617;
        border-radius: 10px;
        font: bold 55px/25px Helvetica, Sans-Serif; text-align: center;
        text-transform: uppercase; text-decoration: none;
        color: #147032;
        text-shadow: 0px 1px 2px #b4d1ad;
}

Теперь, когда общая графика кнопки создана, мы можем перейти к тексту. Шрифт настроен, используем сокращение CSS, назначая его как 55px Helvetica жирный, text-align, text-transform и text-decoration позиционируют текст по центру, переводят его в заглавные буквы и удаляют подчеркивание, которое по умолчанию используется для ссылок.

Наконец, цвет назначен как темно-зеленый, после этого text-shadow используется, чтобы создать эффект углубления. Светло-зеленая тень сдвинута на 1px по оси Y и размазана на 2px.

a.btn {
        display: block; width: 250px; height: 60px; padding: 40px 0 0 0; margin: 0 auto;

        background: #398525; /* old browsers */
        background: -moz-linear-gradient(top, #8DD297 0%, #398525 100%); /* firefox */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8DD297), color-stop(100%,#398525)); /* webkit */

        box-shadow: inset 0px 0px 6px #fff;
        -webkit-box-shadow: inset 0px 0px 6px #fff;
        border: 1px solid #5ea617;
        border-radius: 10px;

        font: bold 55px/25px Helvetica, Sans-Serif; text-align: center;
        text-transform: uppercase; text-decoration: none;
        color: #147032;
        text-shadow: 0px 1px 2px #b4d1ad;

        -moz-transition: color 0.25s ease-in-out;
        -webkit-transition: color 0.25s ease-in-out;
        transition: color 0.25s ease-in-out;
}

        a.btn:hover {
               color: #145675;
               -moz-transition: color 0.25s ease-in-out;
               -webkit-transition: color 0.25s ease-in-out;
               transition: color 0.25s ease-in-out;
        }

Все, что осталось, — настроить простое состояние, когда указатель находится над кнопкой. К сожалению, градиенты CSS и переходы CSS не могут быть использованы вместе, так что мы остановимся на простом изменении цвета текста. Код перехода определяет свойство color и указывает браузеру плавно перейти из одного состояния в другое за 0,25 секунд.

Когда указатель мыши находится над кнопкой, цвет текста на ней плавно изменится от зеленого к синему.

Законченная кнопка на CSS

Посмотрите пример, чтобы увидеть законченную кнопку на CSS в действии. Наша графика построена, используя смесь градиентов, границ и теней CSS, чтобы повторить эффекты, которые раньше могли быть созданы только в Photoshop. Учитывая, что современные браузеры Firefox, Safari и Chrome поддерживают эти свойства CSS3, Вы можете смело добавлять эти украшающие эффекты в дизайн Вашего веб-сайта.

Посмотреть пример кнопки на CSS.

Автор урока Chris Spooner.

Перевод — Дежурка.

Смотрите также:

www.dejurka.ru

Создание интересной кнопки с использованием CSS3

Сегодня мы научимся создавать интересную кнопку при помощи CSS3. Мы стараемся использовать тег <button>, а не <input type=»submit» />, но, что бы вы не предпочли, стиль по умолчанию будет зависеть от вашей операционной системы. Это может несколько расстраивать… Давайте создадим более интересную кнопку, используя стили CSS3, анимацию и трансформации:

Демонстрация работы и исходный код

HTML 

Здесь ничего неожиданного — нам нужен только тег для кнопки:

<button>Click me!</button>

Мы применим эти стили к каждой кнопке, но, если Вы предпочитаете сделать иначе, добавьте класс и атрибут target в CSS в соответствующих местах.

CSS 

Наша кнопка должна работать хорошо в последних версиях браузеров, а также не терять основные черты в старых версиях. Так что мы добавим приставки производителей в CSS только там, где без них нельзя обойтись. Браузеры Firefox, Internet Explorer 10 и выше, а также старые версии браузера Opera поддерживают переходы, преобразования и анимацию без приставок производителей, но нам потребуется приставка -webkit- для браузеров Chrome, Safari и новых версий Opera.

Давайте начнем с основных стилей, чтобы придать форму кнопке:

button
{
display: block;
font-size: 1.1em;
font-weight: bold;
text-transform: uppercase;
padding: 10px 15px;
: 20px auto;
color: #ccc;
background-color: #555;
background: -webkit-linear-gradient(#888, #555);
background: linear-gradient(#888, #555);
border: 0 none;
border-radius: 3px;
text-shadow: 0 -1px 0 #000;
box-shadow: 0 1px 0 #666, 0 5px 0 #444, 0 6px 6px rgba(0,0,0,0.6);
cursor: pointer;

Ничего слишком сложного. Мы использовали везде довольно обычный серый цвет, но Вы можете использовать любые нужные Вам цвета. Заметьте, что свойство background-color было задано для браузеров, не поддерживающих линейные градиенты. Мы также установили вид курсора как указатель, непонятно, почему браузеры не делают этого по умолчанию.

Тень блока — наиболее интересное свойство: box-shadow: 0 1px 0 #666, 0 5px 0 #444, 0 6px 6px rgba(0,0,0,0.6). Этим свойством мы задаем края кнопки, глубину в 5px и легкую тень вокруг нее.

Мы заканчиваем блок свойств, задавая, чтобы эффекты переходов применялись к каждому стилю, когда пользователь наводит указатель мыши, или когда элемент получает фокус. Требуются префиксы и альтернативная запись для -webkit.

    -webkit-transition: all 150ms ease;

transition: all 150ms ease;
}

В следующем блоке свойств мы зададим стили для ситуации,  когда пользователь наводит указатель мыши, или когда элемент получает фокус. Эти свойства зададут анимацию сияния текста:

button:hover, button:focus
{
-webkit-animation: pulsate 1.2s linear infinite;
animation: pulsate 1.2s linear infinite;
}
@-webkit-keyframes pulsate
{
0%   { color: #ddd; text-shadow: 0 -1px 0 #000; }
50%  { color: #fff; text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff; }
100% { color: #ddd; text-shadow: 0 -1px 0 #000; }
}
@keyframes pulsate
{
0%   { color: #ddd; text-shadow: 0 -1px 0 #000; }
50%  { color: #fff; text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff; }
100% { color: #ddd; text-shadow: 0 -1px 0 #000; }
}

Браузеры Firefox, Chrome и Safari не требуют определений 0% и 100%, но Internet Explorer без них не может анимировать свойство тени текста. Не забывайте об этом.

В заключение мы задаем стили для активного состояния кнопки:

button:active
{
color: #fff;
text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff;
box-shadow: 0 1px 0 #666, 0 2px 0 #444, 0 2px 2px rgba(0,0,0,0.9);
-webkit-transform: translateY(3px);
transform: translateY(3px);
-webkit-animation: none;
animation: none;
}

Эти свойства работают следующим образом:

• Анимация выключается и текст переходит в состояние полного сияния.
• Кнопка сдвигается на 3 пикселя вниз при помощи  translateY.
• Свойство  box-shadow, которое определяет глубину кнопки, изменяется на  0 2px 0 #444. Поэтому кнопка была уменьшена с 5px до 2px, но переход 3px создает впечатление, что кнопка утоплена в страницу.
• Внешняя тень тоже уменьшена, чтобы создать впечатление, что кнопка расположена ниже.

Кнопка готова:

Демонстрация работы и исходный код

Кнопка работает, как задумано, во всех современных браузерах и многих старых версиях. Единственная замеченная проблема связана с версиями браузера Opera до перехода на движок Webkit — пульсирующая анимация воспроизводится только один раз. Но в современных версиях все работает правильно.

Пожалуйста, используйте код, как захотите.

Автор урока Craig Buckler

Перевод — Дежурка

Смотрите также:

www.dejurka.ru

Создать красивую кнопку для сайта на CSS3 онлайн

Обзор онлайн сервисов генерации кнопок для вашего сайта на чистом CSS.

Кнопка – один из элементов сайта, стиль оформления которого может активно повлиять на решение пользователя о выполнении какого-либо действия. Или об отказе от него.

Я встречал немало экспериментов в интернете, которые показывали значительный рост конверсии лишь только благодаря изменению дизайна кнопки.

На сегодняшний день существует достаточно много способов сделать красивые кнопки. Можно покопаться в интернете и найти готовые. Можно создать самому с помощью графического редактора Photoshop (или его аналога). Либо же воспользоваться услугами онлайн конструкторов кнопок, о которых и пойдет речь в этой статье.

Раньше при создании кнопок для моего сайта я использовал упомянутый Photoshop. Делал 2 исходника, 1 – в дефолтном состоянии, 2-й при наведении. Но при знакомстве с CSS3 надобность в использовании изображений для создания кнопок напрочь отпала.

Однако далеко не у всех есть возможность и время изучать CSS. Тут то и приходят на помощь онлайн генераторы кнопок, которые позволяют сделать стильные кнопки без знаний CSS.

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

У вас будет 2 области: 1 — в которой вы будете делать настройки, 2 – поле, где можно увидеть в реальном времени результат этих настроек.

Среди настроек:

• Размер кнопки;
• Размер текста;
• Настройка цвета кнопки;
• Скругление углов;
• Создание градиента;
• Фон;
• Выбор шрифта;
• Обводка;
• Отступы;
• Тень;
• Оформление кнопки при наведении;
• Оформление кнопки при нажатии;

Генераторы кнопок на чистом CSS3

.button {
	display: inline-block;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 14px/100% Arial, Helvetica, sans-serif;
	padding: .5em 2em .55em;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: .5em;
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
	text-decoration: none;
}
.button:active {
	position: relative;
	top: 1px;
}

.orange {
	color: #fef4e9;
	border: solid 1px #da7c0c;
	background: #f78d1d;
	background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
	background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.orange:hover {
	background: #f47c20;
	background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
	background: -moz-linear-gradient(top,  #f88e11,  #f06015);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.orange:active {
	color: #fcd3a5;
	background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
	background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}