Понедельник, 09 Апреля 2012 11:27

Красивые кнопки с помощью CSS

Written by 
Оцени эту запись
(1 Голос)

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

Бывают случаи, когда нужно вставить красивую кнопочку, но для нее нету заданного вида, тогда на помошь придут некоторые статьи.

1. Создаем анимированные кнопки при помощи CSS3

В этой статье можно выбрать понравившуюся кнопочку и прочитать о том, как ее можно сделать - приводятся примеры html-кода и стилей к кнопочкам. Рассматривается, в основном, анимация при наведении на кнопку.

 

2. Анимация меню при помощи CSS3

Анлогично, только относится больше к меню, чем к кнопкам. 

 

3. Подборка 10 css3 кнопок

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

 

4. Кнопки CSS3 с закругленными краями и иконками

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

 

5. Ну и рассмотрим полезный ресурс Генератор Кнопок

Как ясно из названия, это онлайн генератор кнопок. Здесь можно изменять размер, цвет, шрифт, цвет шрифта, при наведении и т.д.

 

Делаем кнопку

Ну и предлагаю сделать несложную кнопочку.

Выберем цвета - черный и красный.

Идем на генератор градиента для фона (выше ссылка на подробное описание) и задаем ему нижний фон 121212, а верхний 411212:

 

 

background-image: linear-gradient(bottom, rgb(18,18,18) 0%, rgb(65,18,18) 100%);

background-image: -o-linear-gradient(bottom, rgb(18,18,18) 0%, rgb(65,18,18) 100%);

background-image: -moz-linear-gradient(bottom, rgb(18,18,18) 0%, rgb(65,18,18) 100%);

background-image: -webkit-linear-gradient(bottom, rgb(18,18,18) 0%, rgb(65,18,18) 100%);

background-image: -ms-linear-gradient(bottom, rgb(18,18,18) 0%, rgb(65,18,18) 100%);

background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(18,18,18)), color-stop(1, rgb(65,18,18)) );

 

Не забудьте задать лично для IE фон background: #211212.

 

Делаем border-radius:

 

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
 
 

Теперь предложу еще одну фишку - цвет границы можно делать разным. Например, верхняя чуть светлее фона, нижняя темнее, боковые какие-то средние. Тогда объем кнопки мы поддержим и бордером. Тем более, желательно менять его при наведении на кнопку.

 

Например,

 

border-top: 1px solid #611212; border-right: 1px solid #121212;  border-left: 1px solid #121212; border-bottom: 1px solid #121212; 

 

Цвет текста - возьмем чуть светлее фона - #711212.

 

Тексту можно еще задать тень - text-shadow: 0px 0px 3px #121212.

 

И не забываем выровнять текст по вертикали line-height: 30px; vertical-align: middle и горизонтали text-align: center.

 

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

 

BUTTON

 

 

Хорошо бы ей задать еще эффект при наведении и нажатии. Но это уже на Ваш вкус и цвет.

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов