Главная Интернет Как создать кнопку для сайта на CSS?
Баннер

Как создать кнопку для сайта на CSS?

Полезное - Интернет

Предлагаю вашему вниманию пошаговое руководство по созданию кнопки на сайте на чистом CSS.

HTML-разметка

На этом этапе, нам необходимо написать html разметку кнопки. Для этого существует специальный парный тег "button".

<button> </button>

Парный тег – означает, что обязательно должен присутствовать закрывающийся тег.

Если вы используете кнопку в форме обратной связи, то необходимо задать тип “submit”:

Это связано с тем, что раньше разные браузеры обрабатывали элемент button по-разному. Internet Explorer передавал текст между тегами “button”, а Mazilla – передавала то, что было прописано в атрибуте “Value”. Сейчас ситуация изменилась. Но все же рекомендуется использовать следующий вариант:

<button type="submit"> </button>

Для того, чтобы кнопка понимала к какой форме она привязана, необходим элемент “form” и в нем должен быть задан идентификатор формы:

<form id="zayavka">
<button id="firstButton" type="submit"> Заказать прайс-лист </button>
</form>

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

<button id="firstButton" type="submit" form="zayavka"> Заказать прайс-лист </button>

Теперь добавим стили нашей кнопки.

CSS разметка

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

Поехали…

#firstButton {
display: block; /* Переводим в блочный элемент*/
margin:0 auto; /* Выравниваем по центру */
width: 300px; /* Задаем ширину */
height: 40px; /* Задаем высоту */
border: none; /* Убираем обводку */
background: #188B12; /* Задаем цвет кнопки */
color:#fff; /* Задаем цвет текста */
font:bold 15px 'Arial', sans-serif; /* Жирность, Размер, Шрифт */
cursor: pointer; /*Курсор меняется на пальчик, при наведении*/
box-shadow: 0 4px 0 #11620D; /*Задаем тень - х, у, размытие, цвет*/
border-radius: 3px; /*Скругление углов*/
}

Теперь добавим стили для кнопки, которые будут применяться при наведении на нее курсора. Создадим эффект нажатия.

#firstButton:hover{
margin-top: 2px; /*опустим кнопку на 2 пикселя*/
box-shadow: 0 2px 0 #11620D; /*Делаем меньше тень на 2 пикселя*/
}

Можно сделать так, чтобы кнопка плавно меняла цвет:

#firstButton:hover{
transition: .5s; /* Скорость изменения цвета */
background: #F96400; /* Задаем цвет кнопки */
box-shadow: 0 4px 0 #BB4A00; /*Задаем тень - х, у, размытие, цвет*/
}

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

Источник: http://smartlanding.biz/sozdanie-knopok-dlya-sajta-na-chistom-css.html

 
Баннер

Популярные вопросы