Кнопки | CSS — Примеры

Кнопки | CSS

Простая HTML кнопка для сайта

Есть несколько типов input для создания кнопки и тег button [ type="button | reset | submit" ]. Внешне и функционально они абсолютно одинаковы.



<input type="button" value="input"/>
<button type="button">button</button>

Когда использовать тег button?

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

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

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


Посмотреть описание



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

Создание кнопки: «А нужно ли изменять вид кнопки при наведении или делать кнопку с эффектом нажатия?»

Динамические эффекты реализуются благодаря псевдоклассам:

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

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

Код кнопки для сайта

Иногда самый простой внешний вид может выглядеть более стильно, чем навороченная с крутыми эффектами кнопка. Взгляните, как она тут [cssdeck.com] смотрится.


Добавить в корзину



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


<a href="#" class="button7">кнопка</a>
Как у Сбербанка


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

Кнопка с градиентом

Градиенты плохо поддаются анимации, плавной смене цвета фона. Что же делать? Ответ: box-shadow [перейдите по ссылке, там есть суперская форма входа].

Купить



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

А вот всякие перемещения работают на ура.

Забронировать



<a href="#" class="button12" tabindex="0">кнопка</a>

Довольно популярно разделение кнопки на два цвета


Положить в корзину



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

Красивые кнопки CSS


10 999 р.



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

Как у Google



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




<a href="#" class="button17" tabindex="0">кнопка</a>

Заказать



<a href="#" class="button21">Заказать</a>


<a href="#" class="button28">Установить</a>

Кнопки «Скачать» CSS


Скачать бесплатно первые 30 дней Автор



<a href="#" class="button13">Скачать
бесплатно первые 30 дней</a>

скачать



<a href="#" class="button14">Скачать</a>

Стилизация кнопок с помощью CSS

Анимированная кнопка: "свечение текста"






<input type="button" class="button4" value="Купить">





<input type="button" class="knopka01" value="запись">

Стиль кнопок с бликами


Глянцевая кнопка



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


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

Заказать билеты



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


<a href="#" class="button5" data-twitter>twitter</a>


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


<a href="#" class="button18" tabindex="0">кнопка</a>
1 2 3


<a href="#" class="button27">1</a>

Объёмная кнопка CSS


Объёмная



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

кнопка Автор



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

сделать
заказ
Автор




<a href="#" class="button20">Объёмная</a>

положить в корзину



<a href="#" class="button23">Объёмная</a>

Вдавленная кнопка


Оформить



<a href="#" class="button22">Заказать</a>

Выпуклая кнопка HTML




<a href="#" class="boxShadow4">Заказать</a>

Круглые CSS кнопки






<a href="#" class="button29"></a>

+



<a href="#" class="button30">+</a>

Анимированная кнопка CSS

Анимированное заполнение происходит так (тут нет лишнего кода, связанного с кнопкой). Другие интересные эффекты загрузки можно найти тут [tympanus.net].



<a href="#" class="button26" tabindex="0"><span></span></a>





<a href="#" class="button31" tabindex="0"></a>

3d кнопка CSS




<a href="#" class="button2" tabindex="0">кнопка</a>

Оформление кнопок

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

Кнопка с главным действием должна выделяться из общего содержания, быть контрастной. Тут главное не переусердствовать. Так, например, у интернет магазина e5 это приятно для глаза: кнопка магазина e5 А тут с оранжевым явный перебор, даже на изображении сложно остановить взгляд: кнопки магазина e5

Именно поэтому у Google второстепенные кнопки сначала плоские, а после наведения мышки обретают объём.

Также нужно победить желание сделать кнопку величиной со слона, чтобы не стать объектом баннерной слепоты.

в f t
наверх ↑

98 комментариев:

damir-tote
Спасиб NMitra, что подобное искал =) А не можешь еще показать, как сделать вертикальное выпадающее меню, только не вбок, а вниз))
NMitra
См. http://shpargalkablog.ru/2011/07/accordion-css.html

В качестве содержания добавляйте список ol из ссылок.
Дмитрий
Вып. список это просто) Даже просто введя в гугл вып список на цсс можно найти
NMitra
Посмотрите последний пример http://shpargalkablog.ru/2012/04/display-block-inline-css.html с наведением на пункт меню или с постановкой галочки справа. Есть вариант с :focus, но в Хроме нужно подключать картинку, я не стала поэтому расписывать.

Это на CSS, а можно ещё добавить небольшой скрипт.
segur
Как мне нравится этот блог ! Этот сайт давно у меня в "золотых" закладках !

Спасибо за Ваши толковые статьи и примеры !
NMitra
Благодарю за комментарий! Настроение сразу вверх растёт.
Анонимный
Спасибо большое автору, очень помогло на практике.
NMitra
Рада, что мои записи вам пригодились :)
Анонимный
Если нахожу что-то полезное на сайте, всегда благодарю автора не словами, а кликами по всем рекламным блокам которые нахожу на странице. В этот раз пришлось искать все рекламные блоки. Спасибо автору.
NMitra
Повеселили по поводу "пришлось искать все рекламные блоки" :) Спасибо, что заботитесь о моём благосостоянии и оценили статью.
Алексей
А онлаайн генератором можно создать кнопку под свой вкус http://phpguru.com.ua/servis/css3button/ русскоязычный генератор css3 кнопок. Не сочтите за спам но мне понравился!
NMitra
Проглядела много генераторов кнопок и не представляю как с их помощью можно сделать хоть что-то приемлемое. В статье я просто привожу примеры и надеюсь, что их код не будут брать целиком. Можно посмотреть как реализована тень текста на кнопках, как создаётся эффект нажатия, как сделать, чтобы один текст заменялся другим и при этом правильно выравнивался, какие цвета чаще всего используют, как сделать неполные боковые линии и т.п. Это именно черновой вариант, который можно и нужно изменять, как минимум высоту и ширину.
Станислав
Автору поклон за труды! Кладезь полезных решений для любого проекта. Выразил благодарность еще и переходом по рекламе - идея порадовала:)
NMitra
Благодарю, Станислав. Да, одно время не могла пройти мимо интересной кнопки, пусть даже нарисованной. Надо код немного доработать, а то в Safari кое-где ерунда получается. Например, из background следует выделить background-color
Анонимный
Итересно автор открывал страницу своего материала хотябы в Safari?
NMitra
Открыл-открыл ))) Добавьте префикры -moz- и -webkit- к таким свойствам как transition, background разбейте на background-color и background-image и всё будет нормально. Или воспользуетесь SCSS, тот автоматом делает тоже самое. Я не нашла причин почему мне нужно было усложнять код.
FOMUVI
Сложно пройти мимо и не поблагодарить. Спасибо! Классная выборка кнопок, а главное много и все разные. Есть с чего выбрать и заточить под себя. Класс!
NMitra
Благодарю, что не прошли мимо!
Анонимный
Не работают стили для оперы, подскажите, что нужно сделать?
NMitra
Какой пример вас заинтересовал?
Сергей Полежака
очень понравилась button4, но некоторые браузеры ее не показывают почему то
Алексей
Хорошая статья с помощью нее сделал нормальную кнопку
Анонимный
Норм та так, спасибо
Анонимный
все супер, но как выставить фиксированные размеры кнопки? а то автоматом подгоняет под текст, т.е. под количество написанных букв.
NMitra
Для ширины указать width и text-align: center; Убрать padding-left и padding-right, например, так: padding: 15px 0.

Для высоты сложнее. Можно указать одинаковую height и line-height, но line-height не поддерживается некоторыми мобильными браузерами, например, Opera Mini. Совсем убрать padding.

Можно добавить дополнительно :before http://shpargalkablog.ru/2012/04/vertical-align.html#inline-before (см. "Ура, оно")
Максим Грачев
Как изменит размер кнопки?
NMitra
padding - это отступ до границы border
width - ширина
height - высота
line-height должна быть равна height, чтобы выравнять текст по центру. См. http://shpargalkablog.ru/2012/03/vyrovnyat-tekst-vertikali.html
font-size - размер шрифта
NMitra
Подбирайте значения под себя. В большинстве случаев достаточно изменить padding.
Одно значение: отступ от содержимого для каждого края.
Два значения: первое для вертикальных, второе - горизонтальных сторон.
Три значения для верхней/по бокам/нижней сторон.
Четыре значения: вверх/справа/низ/слева.
См. http://shpargalkablog.ru/2011/03/svoistva-margin-padding.html#p-m-storona
Регина
Спасибо! Очень круто!
Серж
Благодярю! огромный выбор классных кнопок! все стили подходят, можно выбрать для любого дизайна) Намного ускоряют верстку, отличная заготовка!
Анонимный
спасибо
NMitra
Пожалуйста, очень рада таким отзывам!
Анонимный
Хорошая статья! Подскажите, пожалуйста, как на анимированной кнопке button31 повернуть "стрелку" влево (она там направлена вниз). То, что нужно править второй блок я понял, в частности менять градусы и положения, но получается какая-то несуразица.
П. С. К верстке сайтов не имею никакого отношения, html и CSS знаю настолько, насколько мне необходимо - изредка сваять себе хтмл-файлик, как каталог файлов. Но вот на свою голову проблемы нашел - решил сделать себе сайтик и нужна кнопка возврата на предыдущую страницу, которая появляется при адаптации при открытии сайта с моб. устройств, а там стрелочка влево нужна.
NMitra
a.button31:after, a.button31:before {
content: "";
position: absolute;
z-index: -1;
left: 0%;
top: -10%;
right: 0;
bottom: 0;
width: 30%;
height: 10%;
margin: auto;
background: #999;
box-shadow: 0 1px rgba(0,0,0,.1) inset, 0 1px #fff;
transform: rotate(-35deg);
}
a.button31:after {
top: 15%;
transform: rotate(-315deg);
}
Дима
a.button1 {
font-weight: 900;
color: white;
text-decoration: none;
padding: .8em 1em calc(.8em + 3px);
border-radius: 3px;
background:#4d6f91;
transition: 0.2s;
width:500;

}
a.button1:hover { background:#a9c5db; }

Хочу чтобы кнопки были одной ширины а параметр width:500; нечего не изменяет
NMitra
display: inline-block;
width: 500px;
padding: .8em 0 calc(.8em + 3px);
text-align: center;
Robomatic
Спасибо больше, без воды, с примерами, кратко и по делу.
NMitra
Благодарю за отзыв!
тотр
спасибо, господи
NMitra
:))
Max
Огромное спасибо, сегодня пол дня пытался сделать подобную кнопку без плагина на wordpress, дома вечером с первого запроса в Google попал на Вашу страничку :) Наконец то закрою вопрос с кнопочками! СПАСИБО!
NMitra
Благодарю за отзыв!
Анонимный
Подскажите пожалуйста, как вставить такую кнопку на страницу в вордпресс? Если не сложно, то расскажите по-подробнее, так как я еще не очень хорошо разбираюсь в этом (Пытался несколькими способами, описанными в интернете, не получилось)
NMitra
Смотрите в поиске Яндекса/Google

если планируется кнопка на многих страницах - "как изменить шаблон wordpress". Для кнопки или ссылки в файле php добавляете класс, например, class="button16". А стили - в файл .css, например,
.button16 {......}

если для одной страницы, то должна быть кнопка для перехода в "HTML"-режим при написании/редактировании статьи. В нужное место добавляете и стили, и кнопку. Только в этом случае стили нужно вписывать обязательно внутри

<style>
... ... ...
</style>
Я, к сожалению, не изучала админку WP
Владимир Левыкин
Доброго времени суток ))) Сразу оговорюсь, я тока начинаю юзать joomla. Подскажите как правильно? и где нужно что прописать в шаблоне protostar что бы ваши код css применялся адекватно просто уже 3 день мыкаюсь не могу применить стиль. То шаблон разъезжается то кнопка везде где ненужно появляется )))) печаль беда )))). ( Я не волшебник, я тока учусь )
NMitra
Владимир, доброе время суток. Не осерчайте, но вам сюда http://shpargalkablog.ru/p/comments-blog.html
Эдуард
Столько всего, я прям растерялся...
Анонимный
Поменяла кнопку на форуме php bb 3.0, а текст кнопки пропал, как его восстановить?
NMitra
По-подробнее (пропал - стал прозрачным или был заменён на тот, что между тегами a?) или адрес страницы сайта
Анонимный
Пропал в прямом смысле слова, его совсем не видно, но кнопка работает.
NMitra
Не, так не могу, адрес страницы сайта, пожалуйста
Анонимный
К сожалению сайт на локалке находиться, могу только код переслать, но здесь публиковать сайт не хочет.
NMitra
Добавьте на http://jsfiddle.net/
Анонимный
Вот, готово https://jsfiddle.net/Ltuku5gn/
NMitra
А где HTML?
Анонимный
классный сайт
Анонимный
А можно ваши кнопки сразу ставить на сайт или на форуме вставлять в ком? Они будут работать? (начинающий)
Ирина
Офигенно, спасибище!!!
NMitra
Начинающий, что вы имеете ввиду под "Будут работать"? Ваши кнопки изначально должны работать (перенаправлять куда-то посетителя, отправлять форму и т.п.), а это всего лишь украшение кнопок.

Ирина, благодарю за комментарий!
Анонимный
Понимаете, я в этих кодах не разбираюсь, но... кнопки очень понравились... сайтами не занимаюсь, но красиво подать ссылку на файл попробовал... тупо вставил код кнопки добавил адрес на файл и вроде работает! Пример: http://bogoglasnik.ru/load/88-1-0-1380?l_ZeHf (начинающий)
Анонимный
Добрый день. Подскажите пожалуйста, как сделать кнопку что бы она была ссылкой, вела на другую страницу? Где вписать ссылку
А так вроде со всем разобрался и с цветом и размером, а вот как сделать ее ссылкой что бы при нажатии переходить на другую страницу
Заранее благодарен.
NMitra
Заполните атрибут href (подробнее http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html )

<a href="http://shpargalkablog.ru/2012/04/css-knopki.html" class="knopka">кнопка</a>
Анонимный
Спасибо большое! (начинающий)
stobuxov
Спасибо, облазил пол интернета, самая лучшая подборка и описание, спасибо.
NMitra
Благодарю, стараюсь обращать внимание на интересные варианты
Анонимный
Здравствуйте. Отличная статья. Только хотелось бы уточнить у автора поподробнее о том, как скорректировать код (например для - Вдавленная кнопка), чтобы работало в браузере Safari. Я пока не смог понять, как правильно разбить background на background-color и background-image. Может автор показать правильно скорректированный код?
NMitra
Здравствуйте, например,

background: rgb(206, 220, 231) linear-gradient(rgb(206,220,231), rgb(89,106,114));

заменить на

background-color: rgb(206, 220, 231);
background-image: linear-gradient(rgb(206,220,231), rgb(89,106,114));
Medoti Dorf
Приветствую, спасибо за статью!
Подскажите, как сделать кнопку по всей ширине блока ?
a.knopka {
color: #fff; /* цвет текста */
text-decoration: none; /* убирать подчёркивание у ссылок */
user-select: none; /* убирать выделение текста */
background: rgb(212,75,56); /* фон кнопки */
padding: .7em 1.5em; /* отступ от текста */
outline: none; /* убирать контур в Mozilla */
}
a.knopka:hover { background: rgb(232,95,76); } /* при наведении курсора мышки */
a.knopka:active { background: rgb(152,15,0); } /* при нажатии */
NMitra
Здравствуйте!

a.knopka {
display: block;
text-align: center;
}
Medoti Dorf
Спасибо!
Анонимный
Не знаю, когда я наткнулся на эту статью и добавил ее в немногочисленные закладки - года 2 назад. За это время воспользовался примерами раз 20-30 точно! Спасибо автору, и низкий ей поклон!
Анонимный
По поводу SAFARI - я все сделал, но кнопка все равно показывается некорректно.
Не могли бы вы написать полностью обновленный код в ответе для кнопки - button22, тогда все станет понятно.
Спасибо.
NMitra
Комментарий 71: спасибо за отзыв, для меня он важен!
Комментарий 72: попробуйте так http://jsfiddle.net/NMitra/fyd1nzfk/
Анонимный
добрый день! скажите пожалуйста можно ли чтобы кнопка уже была нажата и была не активной. допустим из этого примера:
кнопка "button17"
за ранее буду очень признателен! спасибо!
NMitra
Добрый день, вместо
a.button17:focus:not(:active) {}
напишите
a.button17 {}
Но обычно её делают более приглушённого цвета (плюс можно попробовать прозрачность http://shpargalkablog.ru/2013/02/opacity-css.html ).
Анонимный
Кто знает как делать, свяжитесь со мной по miheyzih@mail.ru
Анонимный
скопировал и вставил на свой сайт , кнопка не вышла, нужно что либо добавлять еще к этому коду?
Объясните как ребенку, т.к еще зелен в этих делах
NMitra
Посмотрите тут, пожалуйста, http://shpargalkablog.ru/p/comments-blog.html#html
Анонимный
Большое огромное спасибо автору блога...
Андрей пивоварчик
Привет, спасибо за кнопки!!! Но возникает небольшая проблема. В каждой из кнопок при наведении кроме подсветки и других эффектов всплывает какая-то красная линия. Как ее убрать подскажите плз. Сайт на wordpress , если это важно
Андрей пивоварчик
Заметил,что это происходит только на определенной теме wordpress
NMitra
Попробуйте для :hover дописать
outline: none;
sawkow1
Спасибо Мастер, получилось красиво:
http://djk-tanzen.de/?mod=anmeld
Но на safari, к сожалению не работает....
Unknown
Отличный материал спасибо, но есть вопрос, возможно ли сделать например в кнопке button31, такой эффект, чтобы после нескольки секунд анимация заменялась на другую кнопку автоматически?
NMitra
Можно. Спасибо за идею! Но ваш вопрос требует несколько большего времени, чем я располагаю. Извините. http://shpargalkablog.ru/p/comments-blog.html
Михаил Евсеев
Лучшие! В закладки!
Анонимный
СПАСИБО ЗА ВАШ ТРУД!!!!
Анонимный
Здравствуйте NMitra.Я новичок. Делаю сайт с помощью корсофтовского комплекса. Делать начал из "спортивного интереса". С текстами как то все сложилось а вот оформление хотелось бы улучшить. Задумал интерактивные кнопки. Воспользовался генераторами кнопок, потому как познания в НTML и CSS нулевые. Генератор выдал два кода НTML и CSS. Не могу объединить.Не хватает познаний. Буду признателен за помощь.Cпасибо.HTML: a href='#' class='button'>Talia Screen Orizzontale</a
СSS
.button {
border: 4px solid #ff6619;
background: #f7f7f7;
background: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#f7f7f7));
background: -webkit-linear-gradient(top, #fafafa, #f7f7f7);
background: -moz-linear-gradient(top, #fafafa, #f7f7f7);
background: -ms-linear-gradient(top, #fafafa, #f7f7f7);
background: -o-linear-gradient(top, #fafafa, #f7f7f7);
background-image: -ms-linear-gradient(top, #fafafa 0%, #f7f7f7 100%);
padding: 3.5px 7px;
-webkit-border-radius: 19px;
-moz-border-radius: 19px;
border-radius: 19px;
-webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
-moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
text-shadow: #2c2e30 0 1px 0;
color: #11c217;
font-size: 17px;
font-family: helvetica, serif;
text-decoration: none;
vertical-align: middle;
}
.button:hover {
border: 4px solid #11c217;
text-shadow: #2c2e30 0 1px 0;
background: #f7f7f7;
background: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#f7f7f7));
background: -webkit-linear-gradient(top, #fafafa, #f7f7f7);
background: -moz-linear-gradient(top, #fafafa, #f7f7f7);
background: -ms-linear-gradient(top, #fafafa, #f7f7f7);
background: -o-linear-gradient(top, #fafafa, #f7f7f7);
background-image: -ms-linear-gradient(top, #fafafa 0%, #f7f7f7 100%);
color: #ff6619;
}
.button:active {
text-shadow: #2c2e30 0 1px 0;
border: 4px solid #ff6619;
background: #f7f7f7;
background: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#f7f7f7));
background: -webkit-linear-gradient(top, #fafafa, #f7f7f7);
background: -moz-linear-gradient(top, #fafafa, #f7f7f7);
background: -ms-linear-gradient(top, #fafafa, #f7f7f7);
background: -o-linear-gradient(top, #fafafa, #f7f7f7);
background-image: -ms-linear-gradient(top, #fafafa 0%, #f7f7f7 100%);
color: #11c217;
}
NMitra
Здравствуйте, так в HTML добавляйте

<a href='#' class='button'>Talia Screen Orizzontale</a>

<style>
.button {
border: 4px solid #ff6619;
background: #f7f7f7;
background: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#f7f7f7));
background: -webkit-linear-gradient(top, #fafafa, #f7f7f7);
background: -moz-linear-gradient(top, #fafafa, #f7f7f7);
background: -ms-linear-gradient(top, #fafafa, #f7f7f7);
background: -o-linear-gradient(top, #fafafa, #f7f7f7);
background-image: -ms-linear-gradient(top, #fafafa 0%, #f7f7f7 100%);
padding: 3.5px 7px;
-webkit-border-radius: 19px;
-moz-border-radius: 19px;
border-radius: 19px;
-webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
-moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
text-shadow: #2c2e30 0 1px 0;
color: #11c217;
font-size: 17px;
font-family: helvetica, serif;
text-decoration: none;
vertical-align: middle;
}
.button:hover {
border: 4px solid #11c217;
text-shadow: #2c2e30 0 1px 0;
background: #f7f7f7;
background: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#f7f7f7));
background: -webkit-linear-gradient(top, #fafafa, #f7f7f7);
background: -moz-linear-gradient(top, #fafafa, #f7f7f7);
background: -ms-linear-gradient(top, #fafafa, #f7f7f7);
background: -o-linear-gradient(top, #fafafa, #f7f7f7);
background-image: -ms-linear-gradient(top, #fafafa 0%, #f7f7f7 100%);
color: #ff6619;
}
.button:active {
text-shadow: #2c2e30 0 1px 0;
border: 4px solid #ff6619;
background: #f7f7f7;
background: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#f7f7f7));
background: -webkit-linear-gradient(top, #fafafa, #f7f7f7);
background: -moz-linear-gradient(top, #fafafa, #f7f7f7);
background: -ms-linear-gradient(top, #fafafa, #f7f7f7);
background: -o-linear-gradient(top, #fafafa, #f7f7f7);
background-image: -ms-linear-gradient(top, #fafafa 0%, #f7f7f7 100%);
color: #11c217;
}
</style>
Анонимный
спасибо за кнопки - выглядят супер !!!!
Анонимный
Очень помогло в работе ибо начинающий.
Однако, как отцентровать текст относительно иконки, что стоит перед кнопкой
height:40px; (высота кнопки)
line-height:40px; (незнамо что, но если равно высоте кнопки, то текст выравнивается по высоте относительно иконки слева)
Узнал только прочитав форум, надо чтобы height=line-height

Вот сейчас опять перечитываю в поисках как убрать подчёркивание.

Очень не хватает просто подробного описания, какой параметр что значит.

Огромное спасибо Автору странички, без информации выше было бы очень тяжко.Спасибо.
Анонимный
Извиняюсь, но никак не получается создать кнопку например, высотой 24 пикселя с иконкой (24х24).
так чтобы текст на копке и иконка слева от текста были по середине кнопки. По горизонтали всё ок , Но то что иконка или текст постоянно съезжают куда то по вертикали, удручает.

Всякие комбинации служебных слов перепробовал, но понять так и не смог.

Может что подскажете. Заранее огромное Спасибо!

a.button_main_ico{
float: left;
width: 200px;
height:24px;
font-size: 16px;
font: Verdana,Arial,Helvetica;
text-align:center;
border:none;
border-radius: 6px;
color:#F8F8F8;
background-color:#3895EA;
text-decoration: none;
outline: none;
user-select: none;;
transition: 0.2s;
}
a.button_main_ico:hover{
background-color: #BABABA;
}
a.button_main_ico:focus {
background-color: #D8D8D8;
}
a.button_main_ico:focus:hover {
background-color: #DFDFDF;
}

a.button_main_ico:before {
content: url(../ico_L_ready.png);
}
NMitra
Вы иконку добавляете с помощью :before? Тогда текст нужно окружить span. :before и span задать vertical-align: middle;

a.button_main_ico:before,
a.button_main_ico span {
content: url(../ico_L_ready.png);
vertical-align: middle;
}

пример https://jsfiddle.net/NMitra/533605pm/
теория http://shpargalkablog.ru/2012/04/vertical-align.html
Анонимный
NMitra - спасибо огромное за внимание и заданное направление.
Иконка у меня 24х24, у вас в примере 16х16 и в итоге когда я подставляю своё то у меня всегда съезжает вниз текст. Иконка стоит правильно, текст начинается где-то с её середины.
Пока разбираюсь.

Спасибо за участие и заданное направление.

За отклик и направление Огромное Спасибо.
NMitra
Высота-то указана фиксированной height:24px;
Анонимный
Однако, нашёл ответ который мне подошёл.

в HTML
Кнопка с иконкой и текстом выравненные по середине кнопки:
Кнопка

Тоже но без иконки:
Кнопка

(слово "класс" - поменять на английское а то тут не печаталось)



В CSS
a.button_main{
float: left;
width: 200px;
height:24px;
font-size: 16px;
font: Verdana,Arial,Helvetica;
text-align:center;
border:none;
border-radius: 6px;
color:#F8F8F8;
background-color:#550000;
text-decoration: none;
outline: none;
user-select: none;;
transition: 0.2s;
}
a.button_main:hover{
background-color: #BA0000;
}
a.button_main:focus {
background-color: #D80000;
}
a.button_main:focus:hover,a.button_history:focus:hover {
background-color: #DF000;
}

.ico_name{
background-image: url(../ico_name.png);
background-repeat: no-repeat;
display: inline-block;
vertical-align: middle;
width: 24px;
height: 24px;
background-position: 0px -1px;


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


Спасибо вы натолкнули на верный путь, с уважением sharpionok
Анонимный
Вместо HTML кода напечаталась ссылка чёрти куда. Как показать код в HTML не понимаю.=(

NMitra
Длинный код удобней смотреть на https://jsfiddle.net/ - сразу результат виден
Или чтобы код опубликовать в комментарии, можно воспользоваться формой из http://shpargalkablog.ru/2010/12/napisat-kod-tekstom.html