Как сверстать кнопку на HTML

Сегодня сделаем кнопку. Рассмотрим несколько способов как это сделать, а лучший выбирайте для себя сами.
С появлением HTML5 создать кнопку стало очень просто, но думаю не каждому подойдет именно этот путь. Дело в том, что если вы делаете коммерческий проект, то нужна хорошая кроссбраузерность, а если вы пока не умеете сделать кнопку с HTML5 которая будет корректно отображаться на старых браузерах (или на новых браузерах от Microsoft т.е. Internet Explorer (в народе “Ослик”)), то лучше сделайте по старинке. В общем читайте подробнее.

Кнопка на HTML5

Хвала великому и могучему HTML5 :) В наши времена кнопку можно создать так:

 <button>Текст кнопки</button> 

Выглядит она по умолчанию не очень, но в чем проблема? У нас есть CSS в котором вы можете сделать чудо :)
Если не умеете, читайте статью до конца, научитесь!

Кнопка картинкой

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

 <a href="#"><img src="knopka.png" /></a> 

Кто не понял, обычная картинка внутри анкора. Вместо решетки нужно вписать URL ссылки. Ну и конечно же совет: картинку делайте в “png” формате, потому что если закругленные края кнопки, то в этом формате вы сможете сделать фон прозрачным.

Ссылка-кнопка

Хорошим вариантом также будет ссылка-кнопка. Скорее это даже лучший вариант, потому что это очень кроссбраузерно. На старых версиях браузеров первый метод может не работать корректно, а второй не очень хороший (он для отдельных случаев).
И так, начнем со ссылки

 <a href="#">Кнопка</a> 

Вот мы имеем не форматированную ссылку.
knopka
Давайте отформатируем её чтобы она стала похожа на кнопку. Первое что нужно сделать, это превратить ссылку в блок:

 <a href="#" class="button">Кнопка</a> 
 .button {
	display: block; /* отображаем блоком */
	width: 100px; /* длинна кнопки */
	height: 30px; /* высота кнопки */
	background-color: #e1e1e1; /* цвет кнопки */
	text-align: center; /* выравнивание по центру */
	text-decoration: none; /* убрали подчеркивание */
	border-radius: 5px; /* круглые края */
	padding-top: 10px; /* выровняли текст по вертикали */
	font-family: Verdana; /* задали шрифт */
	text-transform: uppercase; /* заглавные буквы */
}

.button:hover {
	box-shadow: 1px 1px 3px #666; /* тень при наведении */
} 

Все значения подписал, чтоб было понятно всем. А вот скрин кнопки:
knopka_otformatirovannaja
Ну и при наведении курсора немного тени:
knopka_hover
Над форматированием я сильно не старался, просто показал вариант. Если красиво подобрать цвет и шрифт, получится довольно таки современная кнопка :)
Делайте, экспериментируйте и получится лучше чем у меня! Вопросы в комментарии :)

Pin It

Оставить комментарий

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

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>