Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов

Тянущаяся кнопка

Дата:30.12.15 в 9:16
Раздел: 

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

Тянущаяся кнопка

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

Вот так выглядит схема создания нашего макета

Схема кнопки

Итак, с внешним видом определились! Теперь стоит определиться с требованиями для нашей кнопки, которые помогут создать оптимальный и валидный код:

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

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

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

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

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

картинки-для-первого-способа

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

HTML

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

CSS

.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 разные картинки, а одну объединенную – спрайт.

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

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

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

HTML

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

CSS

.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

HTML

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

CSS

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);
}

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

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

6.0+ 7.0+ 10.5+ 4.0+ 3.6+

Оценок: 3 (средняя 3.7 из 5)

Оценка: 
Ключевые слова: 
Понравилась статья? Расскажите о ней друзьям:

Курсы по CSS (в открытом доступе)