Как стать автором
Моя лентаВсе потоки
Поиск
Написать публикацию
Обновить

Делаем красивые кнопки с помощью CSS3

Чулан
Ожидает приглашения
С выходом CSS3 необходимость использовать графические редакторы, такие как Photoshop или Gimp, для создания спрайтов перестало быть необходимостью. Теперь появилась возможность делать тени, градиенты, скругленные углы и еще многое другое, что не может не радовать.

В этой статья я постараюсь изложить некоторые возможности CSS3, используя для примера тег button. Интересно? Прошу под кат.


Демо
Файлы

Используемые свойства

Для начала опишу те свойства CSS3, которые я буду использовать в этой статье.

border-radius — задает скругленные углы для элемента. Для кроссбраузерности необходимо использовать префиксы (-webkit, -moz, -o)
linear-gradient() — создает линейный градиент. Для кроссбраузерности также используются префиксы.
box-shadow — задает внешние (или внутренние — inset) тени для элемента. Также, необходимы префиксы.

Итак, начнем

Для начала продадим душу дьяволу опишем 2 html-кнопки с классами btn1 и btn2.
<button class="btn1" type="button">button.btn1</button><br />
<button class="btn2" type="button">button.btn2</button>


Опишем основные стили для всех кнопок.
button {
	margin: 10px;
	padding: 8px;
	font-family: 'Tahoma', 'Arial';
	font-size: 15px;
	font-weight: bold;
	cursor: pointer;
}


Кнопка раз

Для начала опишем скругленные углы, цвет текста и рамку.
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
border: 1px solid #777;
color: #eef;

Теперь самое интересное — опишем фон кнопки с использованием градиента.
background: -webkit-linear-gradient(top, #bbb, #333);
background: -moz-linear-gradient(top, #bbb, #333);
background: -o-linear-gradient(top, #bbb, #333);
background: -ms-linear-gradient(top, #bbb, #333);
background: linear-gradient(top, #bbb, #333);


Объясню, что все это значит.
Первый атрибут — позиция. Значение «top» означает, что градиент будет заливаться сверху вниз. Нетрудно догадаться, что «bottom» — снизу вверх, а «left» и «right», соответственно, слева направо и справа налево.
Второй и последующие атрибуты — это, собственно, цвета градиента. Количество цветов может быть больше двух.

Ну и добавим тени.
box-shadow: 0 0 5px #000, inset 0 1px 8px -2px #fff;
-moz-box-shadow: 0 0 5px #000, inset 0 1px 8px -2px #fff;
-webkit-box-shadow: 0 0 5px #000, inset 0 1px 8px -2px #fff;


Теперь добавим динамики нашей кнопке и опишем :hover и :active.
:hover и :active
button.btn1:hover {
	color: #fff;
	background: -webkit-linear-gradient(top, #ddd, #111);
	background: -moz-linear-gradient(top, #ddd, #111);
	background: -o-linear-gradient(top, #ddd, #111);
	background: -ms-linear-gradient(top, #ddd, #111);
	background: linear-gradient(top, #ddd, #111);

	box-shadow: 0 0 15px #000, inset 0 1px 8px -2px #fff;
	-moz-box-shadow: 0 0 15px #000, inset 0 1px 8px -2px #fff;
	-webkit-box-shadow: 0 0 15px #000, inset 0 1px 8px -2px #fff;
}

button.btn1:active {
	background: -webkit-linear-gradient(top, #ddd, #111);
	background: -moz-linear-gradient(top, #ddd, #111);
	background: -o-linear-gradient(top, #ddd, #111);
	background: -ms-linear-gradient(top, #ddd, #111);
	background: linear-gradient(top, #ddd, #111);

	box-shadow: 0 -1px 3px #000, inset 0 1px 8px -2px #fff;
	-moz-box-shadow: 0 -1px 3px #000, inset 0 1px 8px -2px #fff;
	-webkit-box-shadow: 0 -1px 3px #000, inset 0 1px 8px -2px #fff;
}


Как видите, все свойства те же, только с другими значениями.
И в тоге весь код первой кнопки:
Весь код
button.btn1 {
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-o-border-radius: 3px;
	-ms-border-radius: 3px;
	border: 1px solid #777;
	color: #eef;
	background: -webkit-linear-gradient(top, #bbb, #333);
	background: -moz-linear-gradient(top, #bbb, #333);
	background: -o-linear-gradient(top, #bbb, #333);
	background: -ms-linear-gradient(top, #bbb, #333);
	background: linear-gradient(top, #bbb, #333);

	box-shadow: 0 0 5px #000, inset 0 1px 8px -2px #fff;
	-moz-box-shadow: 0 0 5px #000, inset 0 1px 8px -2px #fff;
	-webkit-box-shadow: 0 0 5px #000, inset 0 1px 8px -2px #fff;
}

button.btn1:hover {
	color: #fff;
	background: -webkit-linear-gradient(top, #ddd, #111);
	background: -moz-linear-gradient(top, #ddd, #111);
	background: -o-linear-gradient(top, #ddd, #111);
	background: -ms-linear-gradient(top, #ddd, #111);
	background: linear-gradient(top, #ddd, #111);

	box-shadow: 0 0 15px #000, inset 0 1px 8px -2px #fff;
	-moz-box-shadow: 0 0 15px #000, inset 0 1px 8px -2px #fff;
	-webkit-box-shadow: 0 0 15px #000, inset 0 1px 8px -2px #fff;
}

button.btn1:active {
	background: -webkit-linear-gradient(top, #ddd, #111);
	background: -moz-linear-gradient(top, #ddd, #111);
	background: -o-linear-gradient(top, #ddd, #111);
	background: -ms-linear-gradient(top, #ddd, #111);
	background: linear-gradient(top, #ddd, #111);

	box-shadow: 0 -1px 3px #000, inset 0 1px 8px -2px #fff;
	-moz-box-shadow: 0 -1px 3px #000, inset 0 1px 8px -2px #fff;
	-webkit-box-shadow: 0 -1px 3px #000, inset 0 1px 8px -2px #fff;
}



Кнопка два

Попробуем создать вечный двигатель «стеклянную» кнопку.
Я не буду пояснять все свойства, т.к. они уже были выше.
Все как обычно, пишем код самой кнопки и код 2х псевдоклассов.
Кнопка два
button.btn2 {
	background: -webkit-linear-gradient(top, #00a, #002);
	background: -moz-linear-gradient(top, #00a, #002);
	background: -o-linear-gradient(top, #00a, #002);
	background: -ms-linear-gradient(top, #00a, #002);
	background: linear-gradient(top, #00a, #002);
	border: none;
	color: #eee;
	cursor: pointer;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	-o-border-radius: 6px;
	-ms-border-radius: 6px;
	position: relative;
	overflow: hidden;
	box-shadow: 0 0 2px #000;
	-moz-box-shadow: 0 0 2px #000;
	-webkit-box-shadow: 0 0 2px #000;
}
button.btn2:hover {
	background: -webkit-linear-gradient(top, #00a, #004);
	background: -moz-linear-gradient(top, #00a, #004);
	background: -o-linear-gradient(top, #00a, #004);
	background: -ms-linear-gradient(top, #00a, #004);
	background: linear-gradient(top, #00a, #004);
}
button.btn2:active {
	background: -webkit-linear-gradient(top, #00a, #002);
	background: -moz-linear-gradient(top, #00a, #002);
	background: -o-linear-gradient(top, #00a, #002);
	background: -ms-linear-gradient(top, #00a, #002);
	background: linear-gradient(top, #00a, #002);
}



Для достижения эффекта стекла я отдал предпочтение псевдоэлементу :before. Он добавляет содержимое свойства «content» в самое начало элемента. Все остальные свойства такие же, как и при описании обычного класса.
Для этого псевдоэлемента тоже нужно описать все псевдоклассы.
:before
button.btn2:before  {
	content: ' ';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 45%;
	background: rgba(255,255,255,0.4);
	border-radius: 0 0 4px 4px;
	box-shadow: 0 0 4px 2px rgba(255,255,255,0.4);
	-moz-box-shadow: 0 0 4px 2px rgba(255,255,255,0.4);
	-webkit-box-shadow: 0 0 4px 2px rgba(255,255,255,0.4);
}
button.btn2:hover:before {
	background: rgba(255,255,255,0.5);
	box-shadow: 0 0 4px 2px rgba(255,255,255,0.5);
	-moz-box-shadow: 0 0 4px 2px rgba(255,255,255,0.5);
	-webkit-box-shadow: 0 0 4px 2px rgba(255,255,255,0.5);
}
button.btn2:active:before {
	background: rgba(255,255,255,0.4);
	box-shadow: 0 0 4px 2px rgba(255,255,255,0.4);
	-moz-box-shadow: 0 0 4px 2px rgba(255,255,255,0.4);
	-webkit-box-shadow: 0 0 4px 2px rgba(255,255,255,0.4);
}



Кнопка два
button.btn2 {
	background: -webkit-linear-gradient(top, #00a, #002);
	background: -moz-linear-gradient(top, #00a, #002);
	background: -o-linear-gradient(top, #00a, #002);
	background: -ms-linear-gradient(top, #00a, #002);
	background: linear-gradient(top, #00a, #002);
	border: none;
	color: #eee;
	cursor: pointer;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	-o-border-radius: 6px;
	-ms-border-radius: 6px;
	position: relative;
	overflow: hidden;
	box-shadow: 0 0 2px #000;
	-moz-box-shadow: 0 0 2px #000;
	-webkit-box-shadow: 0 0 2px #000;
}

button.btn2:before  {
	content: ' ';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 45%;
	background: rgba(255,255,255,0.4);
	border-radius: 0 0 4px 4px;
	box-shadow: 0 0 4px 2px rgba(255,255,255,0.4);
	-moz-box-shadow: 0 0 4px 2px rgba(255,255,255,0.4);
	-webkit-box-shadow: 0 0 4px 2px rgba(255,255,255,0.4);
}

button.btn2:hover {
	background: -webkit-linear-gradient(top, #00a, #004);
	background: -moz-linear-gradient(top, #00a, #004);
	background: -o-linear-gradient(top, #00a, #004);
	background: -ms-linear-gradient(top, #00a, #004);
	background: linear-gradient(top, #00a, #004);
}

button.btn2:hover:before {
	background: rgba(255,255,255,0.5);
	box-shadow: 0 0 4px 2px rgba(255,255,255,0.5);
	-moz-box-shadow: 0 0 4px 2px rgba(255,255,255,0.5);
	-webkit-box-shadow: 0 0 4px 2px rgba(255,255,255,0.5);
}

button.btn2:active {
	background: -webkit-linear-gradient(top, #00a, #002);
	background: -moz-linear-gradient(top, #00a, #002);
	background: -o-linear-gradient(top, #00a, #002);
	background: -ms-linear-gradient(top, #00a, #002);
	background: linear-gradient(top, #00a, #002);
}

button.btn2:active:before {
	background: rgba(255,255,255,0.4);
	box-shadow: 0 0 4px 2px rgba(255,255,255,0.4);
	-moz-box-shadow: 0 0 4px 2px rgba(255,255,255,0.4);
	-webkit-box-shadow: 0 0 4px 2px rgba(255,255,255,0.4);
}



Надеюсь, эта статья помогла вам освоиться в новых (для кого-то) свойствах CSS3.
Спасибо за внимание.
Теги:
Хабы:
Данная статья не подлежит комментированию, поскольку её автор ещё не является полноправным участником сообщества. Вы сможете связаться с автором только после того, как он получит приглашение от кого-либо из участников сообщества. До этого момента его username будет скрыт псевдонимом.

Ваш аккаунт

Разделы

Информация

Услуги

Техническая поддержка
© 2006–2025, Habr