Как сделать кнопки css

• кнопка должна обладать «резиновыми» свойствами (растягиваться в зависимости от ширины текста);
• кнопка должна быть создана из тега input;
• кликабильность должна сохранятся по всему периметру кнопки (не только на тексте);
• для создания кнопки за основу берется HTML-код, без использования javascript;
• соблюдение всех стандартов;
• высокий показатель кроссбраузерности.

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

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

Просто длинный фон

Первое решение достаточно примитивное, но завоевывает внимание своим оригинальным подходом. Для начала следует создать в фотошопе 2 картинки, которые создадут фон кнопки и ее форму. Вам понадобится создать такие картинки

После чего создаем кнопку из тега input и устанавливаем фоном нашу картинку. В силу того, что картинка достаточно длинная, она займет нужное место в кнопке, а лишнее отсекается границами контейнера. Но чтобы левая часть выглядела также красиво, как и права, необходимо добавить вспомогательный блок, в который и войдет правая часть нашей кнопки. Кодовая часть нашего метода примет следующий вид:

div class="button"> input type="submit" value="" />Текст кнопки span>span> div>

.button  color: #fff; height: 23px; padding: 5px 6px 0 6px; background: url(img-button1) no-repeat; float: left; position: relative; overflow: hidden; > .button span  background: url(img-button2); height: 23px; width: 8px; display: block; position: absolute; z-index: 1; /* указание параметра обязательно, так как input должен быть расположен выше */ top: 0; right: 0; overflow: hidden; > .button input  position: absolute; top: 0; left: 0; width: 100%; /* Растягиваем кнопку на всю ширину картинки */ height: 100%; opacity: 0; filter:progid:DXImageTransform.Microsoft. Alpha(opacity=0); /* прозрачность для ие6-7 */ cursor: pointer; border: none; z-index: 2; > html .button  height: 23px; /* для работы в ие6 */ >

Убедимся, что метод работает

При использовании такого метода стоит помнить о том, что:

• лечение для IE должно быть подключено через условные комментарии;
• лучше использовать не 2 разные картинки, а одну объединенную — спрайт.

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

Модифицируем первое решение

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

div class="button"> input type="submit" value=" Текст кнопки " /> span>span> div>

.button  float: left; > .button div  position: relative; color: #fff; height: 23px; background: url(img-button1) no-repeat; > html .button div  width: 10px; > .button span  background: url(img-button2); height: 23px; width: 8px; display: block; position: absolute; z-index: 1; top: 0; right: -6px; overflow: hidden; > .button input  height: 100%; cursor: pointer; margin: 0 -6px 0 0; padding: 2px 6px 5px 6px; overflow: visible; border: none; position: relative; z-index: 2; background: none; >

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

В чем выигрывает этот метод?

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

Однако в тоже время имеют место некоторые недостатки:

• очень объемный код для одной кнопки.

Решение на CSS3

С выходом новой спецификации создание кнопки значительно упростилось. Теперь не требуется такой огромный код, а скругленные уголки легко реализуются с помощью свойства border-radius. Потребуется только немного подлечить старичка IE

input type="submit" value="текст кнопки" />

input  height: 23px; cursor: pointer; padding: 2px 6px 5px 6px; overflow: visible; border: none; background: # 7caee1; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; behavior: url(path-to/PIE.htc); >

Преимущества использования этого метода на лицо! Код значительно меньше и проще, а главное полностью валиден. Результат в браузере будет точно такой же, как и в предыдущих способах.

В каких браузерах работает?

Как оформить кнопки с помощью CSS

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

1. Создайте

Прежде всего создайте элемент .

button type="button">Submitbutton>

Многие разработчики также используют теги , , или .

2. Оформите кнопку. Сейчас можете применить стили к вашим кнопкам с помощью класса.

button < display: inline-block; background-color: #7b38d8; border-radius: 10px; border: 4px double #cccccc; color: #eeeeee; text-align: center; font-size: 28px; padding: 20px; width: 200px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; cursor: pointer; margin: 5px; >

3.Оформите выделенное состояние (hover state).

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

button:hover < background-color: green; >

А сейчас рассмотрим интересный пример, где использован элемент :

Пример

html> html> head> title>Заголовок документа title> style> button < display: inline-block; background-color: #7b38d8; border-radius: 10px; border: 4px double #cccccc; color: #eeeeee; text-align: center; font-size: 28px; padding: 20px; width: 200px; transition: all 0.5s; cursor: pointer; margin: 5px; > button span < cursor: pointer; display: inline-block; position: relative; transition: 0.5s; > button span:after < content: '\00bb'; position: absolute; opacity: 0; top: 0; right: -20px; transition: 0.5s; > button:hover < background-color: #f7c2f9; > button:hover span < padding-right: 25px; > button:hover span:after < opacity: 1; right: 0; > style> head> body> h2>Style buttons h2> button> span>Submit span> button> body> html>

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

В следующем примере использован элемент .

Пример

html> html> head> title>Заголовок документа title> style> body < background: #560059; color:#eeeeee; font-family:Arial; font-size:16px; > .wrapper < margin: 80px auto; text-align: center; width: 100%; position: relative; > .button < padding: 15px 100px; margin:10px 4px; color: #eee; font-family: sans-serif; text-transform: uppercase; text-align: center; position: relative; text-decoration: none; display:inline-block; border:1px solid ; > .button::before< content: ""; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; z-index: -1; -webkit-transform: scaleY(.1); transform: scaleY(.1); transition: all .4s > .button:hover< color:#b414ba; > .button:hover::before< opacity: 1; background-color: #f7c2f9; -webkit-transform: scaleY(1); transform: scaleY(1); transition: -webkit-transform .6s cubic-bezier(.08, .35, .13, 1.02), opacity .4s; transition: transform .6s cubic-bezier(.08, .35, .13, 1.02), opacity > style> head> body> div class="wrapper"> span class="button">Button 1 span> span class="button">Button 2 span> div> body> html>

Здесь использован элемент .

Пример

html> html> head> title>Заголовок документа title> style> body < background: #3b0044; color:#6098FF; font-family:sans-serif; font-size:16px; > .wrapper < margin: 80px auto; text-align: center; width: 100%; position: relative; > .button < padding: 15px 100px; margin:10px 4px; color: #ffffff; font-family: sans-serif; text-transform: uppercase; text-align: center; position: relative; text-decoration: none; display:inline-block; > .button< border:1px solid transparent; -webkit-transition: all 0.4s cubic-bezier(.5, .24, 0, 1); transition: all 0.4s cubic-bezier(.5, .24, 0, 1); > .button::before < content: ''; position: absolute; left: 0px; bottom:0px; z-index:-1; width: 0%; height:1px; background: #003177; box-shadow: inset 0px 0px 0px #b6cdef; display: block; -webkit-transition: all 0.4s cubic-bezier(.5, .24, 0, 1); transition: all 0.4s cubic-bezier(.5, .24, 0, 1) > .button:hover::before < width:100%; > .button::after < content: ''; position: absolute; right: 0px; top:0px; z-index:-1; width: 0%; height:1px; background: #a9c1e8; -webkit-transition: all 0.4s cubic-bezier(.7, .25, 0, 1); transition: all 0.4s cubic-bezier(.7, .25, 0,1) > .button:hover::after < width:100%; > .button:hover< border-left:1px solid #b6cdef; border-right:1px solid #6098FF; > style> head> body> div class="wrapper"> a href="#" class="button">Button 1 a> a href="#" class="button">Button 2 a> div> body> html>

В следующем примере мы использовали элемент :

Пример

html> html> head> title>Заголовок документа title> style> .container < position: absolute; top: 10%; > .button < border: none; display: block; text-align: center; cursor: pointer; text-transform: uppercase; outline: none; overflow: hidden; position: relative; color: #eeeeee; font-weight: 600; font-size: 15px; background-color: #153f00; padding: 15px 50px; margin: 0 auto; > .button span < position: relative; z-index: 1; > .button:after < content: ""; position: absolute; left: 0; top: 0; height: 470%; width: 140%; background: #52b71f; -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; -webkit-transform: translateX(-100%) translateY(-25%) rotate(45deg); transform: translateX(-100%) translateY(-25%) rotate(45deg); > .button:hover:after < -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg); transform: translateX(-9%) translateY(-25%) rotate(45deg); > style> head> body> h2>Style button h2> div class="container"> button type="button" class="button"> span>Hover! span> button> div> body> html>

Еще один пример с элементом :

Пример

html> html> head> title>Заголовок документа title> style> body < font-size: 60%; background: #00abb7; > .container < padding: 50px; > button, button::after < -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; > button < background: none; border: 4px solid #fff; border-radius: 10px; color: #fff; display: block; font-size: 1.6em; font-weight: bold; margin: 10px auto; padding: 2em 6em; position: relative; text-transform: uppercase; > button::before, button::after < background: #fff; content: ''; position: absolute; z-index: -1; > button:hover < color: #29f2e4; > .button1::after < height: 0; left: 0; top: 0; width: 100%; > .button1:hover:after < height: 100%; > .button2::after < height: 100%; left: 0; top: 0; width: 0; > .button2:hover:after < width: 100%; > .button3::after < height: 0; left: 50%; top: 50%; width: 0; > .button3:hover:after < height: 100%; left: 0; top: 0; width: 100%; > style> head> body> div class="container"> button type="button" class="button1">Button 1 button> button type="button" class="button2">Button 2 button> button type="button" class="button3">Button 3 button> div> body> html>

В следующем примере использован элемент :

Пример

html> html> head> title>Заголовок документа title> style> input < padding: 15px 100px; margin:10px 4px; cursor: pointer; text-transform: uppercase; text-align: center; position: relative; > input:hover < opacity:0.5;> style> head> body> input type="button" value="Button"/> body> html>

Большая коллекция кнопки CSS / HTML

Замечательная коллекция кнопок на CSS и HTML с валидным и качественным кодом для современного сайта, чтобы оформить меню, ссылки, вход в профиль, кнопки добавить комментарии (купить, открыть, или пройти на страницу), изменить дизайн перехода на предыдущую страницу, табы и т.д.

Примеры 30 кнопок CSS3, только чистый код (без JS и картинок) , смотрим ниже!
Представляем на dle9.com замечательную коллекцию кнопок на CSS и HTML с валидным и качественным кодом.

Дополнительно рекомендуем обзор с 26 простыми кнопками CSS, HTML, только чистый код (без JS) можно посмотреть, опробовать, по-нажимать и увидеть наглядный результат.

Как сделать кнопку на CSS

Страница с примерами ниже, красивых и современных вариантов кнопок только на CSS и HTML

Из ссылки, тега span или div можно сделать с помощью CSS очень даже симпатичную кнопку.

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

Самый простой способ изменить цвет, шрифт, размер, тень, градиент и другие стили кнопки HTML не нарушая целостности кода, воспользоваться супер инструментов вашего браузере. Подойдет для этих целей Мозила, Опера, Гугл Хром, Яндекс.Браузер и другие программы в которых встроен инструмент «Веб-разработка».
Как пользоваться инструментом «Веб-разработка Firefox Mozilla» подробно инструкция в картинках.
Простая HTML кнопка для сайта может содержать значение input, при создание кнопки с тегом button по своему действию напоминает результат, получаемый с помощью тега input (с атрибутом type=»button | reset | submit»). Функционально и внешне они относительно одинаковы. Внутри тега button каждый вебмастер может добавить отформатированный текст, или подходящее изображение. Различаются эти элементы и кнопки с применением тега input (c атрибутом type = «button») несколькими параметрами.

Главным отличием тега button, это расширенные возможности по созданию кнопок HTML. Например, вы можете размещать любые элементы HTML и изображения. Применив стили, можно изменить внешний вид кнопки, шрифт, цвета фона, градиент, размеры и другие параметры.

 button

Когда применяется тег button?

• тег button в качестве открывающегося и закрывающегося значения, может включать дочерние теги,
• если текст на кнопке один, то применяется значение value, а при нажатие на копку может передаваться другой.

Как изменить вид кнопки при наведении, сделать эффект нажатия? Динамические эффекты вы сможете реализовать с помощью псевдоклассов:

:hover — при наведении. С появлением сенсорных экранов необходимость в :hover отпала. Для остальных же нужно как минимум изменение вида курсора мышки, чтобы дать понять, что элемент не является декорацией.
:active — в момент нажатия кнопки. Когда на странице тут же что-то явно происходит, например, переход по ссылке, загрузка модального окна, появляется значок обработки формы, то :active можно опустить.
:focus — пока кнопка в фокусе, то есть когда пользователь нажал на кнопку, но ещё не щёлкнул курсором мышки в другое место окна браузера. Без :focus невозможно объединить visibility: hidden; и transition. Если слишком быстро убрать мышку, то элемент повиснет в «половинном» состоянии, например, ссылка будет прозрачна, но по ней можно делать переход.

Сложнее всего сделать и продумать вид, задать параметры, понять, как должны изменяться эффекты во время нажатия кнопки, не нарушая целостность дизайна или вёрстки страницы. Чаще всего самый простой внешний вид, выглядит более стильно, чем навороченная с крутыми элементами и цветом кнопка. Большая коллекция кнопки CSS / HTML