Тег input
Тег input может использоваться для создания различных элементов ввода на странице (текстовое поле ввода, кнопка и других) и принимать значения следующих атрибутов:
- type — указывает на тип элемента (в нашем случае это button);
- name — позволяет задать имя элемента (это необходимо, например, для идентефикации кнопки обработчиком формы);
- value — задает значение для элемента (например, для передачи данных формы) и это значение выполняет роль надписи на кнопке.
Таким образом, записанная с помощью тега input кнопка будет выглядеть так:
<input type="button" name="nubex" value="Nubex" />Результат:
Тег button
Кнопки для сайта могут быть определены и с помощью тега button HTML. Преимущество этого тега перед input заключается в том, что здесь можно добавить на кнопку и другие элементы, к примеру, изображение:
<button name="nubex" value="Nubex"> <img style="vertical-align: middle; width: 24px;" src="http://nubex.ru/files/siroezhkin/icon.png" alt="" /> Конструктор сайтов "Нубекс" </button>
Результат:
Атрибуты тега button такие же, как и у input, отличие лишь в том, что значение value теперь не является надписью на кнопке, а служит только для передачи значения на сервер.
Кнопка-ссылка
Третий вариант создания кнопки на странице — использование тега a, т. е. обычной ссылки. Вид кнопки ссылка приобретает при применении к ней нужных CSS-стилей. Рассмотрим вариант создания кнопки с помощью ссылки:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Кнопка ссылка</title> <style> a.nubex { color: #fff; user-select: none; /* Убираем текстовое выделение */ text-decoration: none; /* Убираем подчеркивание */ outline: none; /* Убираем контур вокруг ссылки */ background-color: #fa8e47; /* Цвет фона */ padding: 1em 2em; /* Отступ от текста до рамки */ } a.nubex:active { background-color: #ee6206; /* Цвет кнопки при нажатии */ } a.nubex:hover { background-color: #f97f2e; /* Цвет кнопки при наведении курсора */ } </style> </head> <body> <a href="#" class="nubex">Кнопка-ссылка</a> </body> </html>
Данный способ предоставляет большое преимущество и свободу в оформлении кнопки.
В конструкторе сайтов «Нубекс» кнопки-ссылки можно вставлять через визуальный редактор. О добавлении кнопок вы можете узнать больше в статье: Просто добавьте кнопку!
nubex.ru
Решение 1: Кнопка в форме.
<form method="get" action="/page2"> <button type="submit">Continue</button> </form> Но проблема заключается в том, что в некоторых версиях популярных браузеров, таких как Chrome, Safari и Internet Explorer, он добавляет знак вопроса в конец URL-адреса. Таким образом, другими словами, для кода выше ваш URL-адрес будет выглядеть следующим образом:
http://someserver/pages2? Есть один способ исправить это, но для этого потребуется конфигурация на стороне сервера. Одним из примеров использования Apache Mod_rewrite было бы перенаправление всех запросов с завершающим ? на их соответствующий URL без ?. Вот пример использования .htaccess, но есть полный поток здесь:
RewriteCond %{THE_REQUEST} ? HTTP [NC] RewriteRule ^/?(index.cfm)? /? [R=301,L] Аналогичные конфигурации могут различаться в зависимости от используемого веб-сервера и используемого стека. Итак, резюме этого подхода:
Плюсы:
- Это настоящая кнопка, и семантически это имеет смысл.
- Так как это настоящая кнопка, она также будет действовать как настоящая кнопка (например, перетаскиваемое поведение и/или имитировать щелчок при нажатии пробела при активном действии).
- Нет JavaScript, не требуется сложный стиль.
Минусы:
- Трейлинг
?выглядит уродливым в некоторых браузерах. Это может быть исправлено с помощью взлома (в некоторых случаях) с использованием POST вместо GET, но чистым способом является перенаправление на стороне сервера. Недостатком перенаправления на стороне сервера является то, что он вызовет дополнительный HTTP-вызов для этих ссылок из-за перенаправления 304. - Добавляет дополнительный элемент
<form> - Позиционирование элементов при использовании нескольких форм может быть сложным и ухудшается при работе с адаптивными проектами. Некоторое расположение может стать невозможным для достижения этого решения в зависимости от порядка элементов. Это может в конечном итоге повлиять на удобство использования, если на проект влияет эта проблема.
Решение 2: Использование JavaScript.
Вы можете использовать JavaScript для запуска onclick и других событий, чтобы имитировать поведение ссылки с помощью кнопки. Пример ниже может быть улучшен и удален из HTML, но здесь просто проиллюстрировать идею:
<button onclick="window.location.href='/page2'">Continue</button> Плюсы:
- Простой (для базовых требований) и сохраняющий семантику, не требуя дополнительной формы.
- Так как это настоящая кнопка, она также будет действовать как настоящая кнопка (например, перетаскиваемое поведение и/или имитировать щелчок при нажатии пробела при активном действии).
Минусы:
- Требуется JavaScript, что означает менее доступный. Это не идеально подходит для базового (основного) элемента, такого как ссылка.
Решение 3: Якорь (ссылка), стилизованная как кнопка.
Стилирование ссылки как кнопки относительно легко и может обеспечить аналогичный опыт в разных браузерах. Bootstrap делает это, но его также легко достичь самостоятельно, используя простые стили.
Плюсы:
- Простой (для основных требований) и хорошая поддержка кросс-браузера.
- Не требуется
<form>для работы. - Не требуется JavaScript для работы.
Минусы:
- Семантика вроде бы сломана, потому что вам нужна кнопка, которая действует как ссылка, а не ссылка, которая действует как кнопка.
- Он не будет воспроизводить все действия решения №1. Он не будет поддерживать то же поведение, что и кнопка. Например, при перетаскивании ссылки реагируют по-разному. Также триггер ссылки «пробел» не будет работать без какого-либо дополнительного кода JavaScript. Это добавит много сложности, поскольку браузеры не согласуются с тем, как они поддерживают события
keypressна кнопках.
Заключение
Решение №1 (кнопка в форме) кажется наиболее прозрачной для пользователей с минимальной требуемой работой. Если ваш макет не влияет на этот выбор, и настройка на стороне сервера практически осуществима, это хороший вариант для случаев, когда доступность является главным приоритетом (например, ссылки на странице ошибки или сообщения об ошибках).
Если JavaScript не является препятствием для ваших требований к доступности, тогда решение # 2 (JavaScript) будет предпочтительнее, чем # 1 и # 3.
Если по какой-то причине доступность имеет жизненно важное значение (JavaScript не является вариантом), но вы находитесь в ситуации, когда ваш дизайн и/или конфигурация вашего сервера мешают вам использовать параметр №1, тогда решение №3 (Якорь, подобная кнопке), является хорошей альтернативой для решения этой проблемы с минимальным воздействием на использование.
qaru.site
shpargalkablog.ru
Вашему вниманию предлагается новая коллекция идей, как можно красиво оформить кнопки для сайта. Необычные эффекты созданы с помощью фоновых заливок, тени блока, трансформаций и псевдоэлементов. Большинство примеров реализованы на основе одного элемента — <a href="">Button</a>. Вы можете использовать свою цветовую гамму, шрифт и размеры для кнопок, чтобы они гармонично вписались в общий дизайн вашего сайта.
Перейти на страницу с примерами
Пример 1.
Анимация при наведении достигается за счёт изменения позиции градиентной заливки.
<a href="">Button</a>
body {background: #d6eaf8} a { text-decoration: none; outline: none; display: inline-block; color: white; padding: 20px 30px; margin: 10px 20px; border-radius: 10px; font-family: 'Montserrat', sans-serif; text-transform: uppercase; letter-spacing: 2px; background-image: linear-gradient(to right, #9EEFE1 0%, #4830F0 51%, #9EEFE1 100%); background-size: 200% auto; box-shadow: 0 0 20px rgba(0,0,0,.1); transition: .5s; } a:hover {background-position: right center;}
Пример 2.
Для псевдоэлементов изначально задана нулевая высота и ширина, которая сменяется на 100% при наведении. Блоки, генерируемые с помощью псевдоэлементов, прозрачные, для них заданы левая/верхняя и правая/нижняя границы, которые проявляются при наведении, создавая эффект прорисовки.
<a href="">Button</a>
html {height: 100%} body { background: linear-gradient(to top, #55EFCB 0%, #5BCAFF 100%); height: 100%; } a { text-decoration: none; outline: none; display: inline-block; padding: 20px 30px; margin: 10px 20px; position: relative; color: white; border: 1px solid rgba(255,255,255,.4); background: none; font-weight: 300; font-family: 'Montserrat', sans-serif; text-transform: uppercase; letter-spacing: 2px; } a:before, a:after { content: ""; position: absolute; width: 0; height: 0; opacity: 0; box-sizing: border-box; } a:before { bottom: 0; left: 0; border-left: 1px solid white; border-top: 1px solid white; transition: 0s ease opacity .8s, .2s ease width .4s, .2s ease height .6s; } a:after { top: 0; right: 0; border-right: 1px solid white; border-bottom: 1px solid white; transition: 0s ease opacity .4s, .2s ease width , .2s ease height .2s; } a:hover:before, a:hover:after{ height: 100%; width: 100%; opacity: 1; } a:hover:before {transition: 0s ease opacity 0s, .2s ease height, .2s ease width .2s;} a:hover:after {transition: 0s ease opacity .4s, .2s ease height .4s , .2s ease width .6s;} a:hover {background: rgba(255,255,255,.2);}
Пример 3.
Кнопка при наведении меняет цвет фона и текста, тень блока и смещается вверх с помощью трансформации.
<a href="">Button</a>
body {background: url(https://html5book.ru/wp-content/uploads/2015/07/background39.png);} a { text-decoration: none; outline: none; display: inline-block; width: 140px; height: 45px; line-height: 45px; border-radius: 45px; margin: 10px 20px; font-family: 'Montserrat', sans-serif; font-size: 11px; text-transform: uppercase; text-align: center; letter-spacing: 3px; font-weight: 600; color: #524f4e; background: white; box-shadow: 0 8px 15px rgba(0,0,0,.1); transition: .3s; } a:hover { background: #2EE59D; box-shadow: 0 15px 20px rgba(46,229,157,.4); color: white; transform: translateY(-7px); }
Пример 4.
При наведении кнопка меняет положение градиента, а тень блока исчезает.
<a href="">Button</a>
body {background:url(https://html5book.ru/wp-content/uploads/2015/10/background54.png)} a { text-decoration: none; outline: none; display: inline-block; padding: 12px 40px; margin: 10px 20px; border-radius: 30px; background-image: linear-gradient(45deg, #6ab1d7 0%, #33d9de 50%, #002878 100%); background-position: 100% 0; background-size: 200% 200%; font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: 300; color: white; box-shadow: 0 16px 32px 0 rgba(0,40,120,.35); transition: .5s; } a:hover { box-shadow: 0 0 0 0 rgba(0,40,120,0); background-position: 0 0; }
Пример 5.
При наведении градиентный блок, генерируемый с помощью псевдоэлемента, меняет высоту с нулевой на 100%.
<a href="">Button</a>
body {background: #1D1B26;} .button-container a { text-decoration: none; outline: none; color: white; display: inline-block; position: relative; padding: 15px 30px; border: 1px solid; border-image: linear-gradient(180deg, #ff3000, #ed0200, #ff096c, #d50082); border-image-slice: 1; margin: 10px 20px; font-family: 'Montserrat', sans-serif; text-transform: uppercase; overflow: hidden; letter-spacing: 2px; transition: .8s cubic-bezier(.165,.84,.44,1); } .button-container a:before { content: ""; position: absolute; left: 0; top: 0; height: 0; width: 100%; z-index: -1; color: white; background: linear-gradient(180deg, #ff3000, #ed0200, #ff096c, #d50082); transition: .8s cubic-bezier(.165,.84,.44,1); } a:hover {background: rgba(255,255,255,0);} a:hover:before { bottom: 0%; top: auto; height: 100%; }
Пример 6.
При наведении кнопке добавляется анимация градиентной заливки.
<a href="">Button</a>
body {background: url(https://html5book.ru/wp-content/uploads/2015/10/background54.png)} a { text-decoration: none; outline: none; display: inline-block; margin: 10px 20px; padding: 15px 30px; overflow: hidden; border: 2px solid; border-bottom-width: 4px; font-family: 'Montserrat', sans-serif; text-transform: uppercase; font-weight: bold; letter-spacing: 2px; color: rgba(30,255,188,1); background: rgba(255,255,255,1); transition: color .3s, background .5s; } a:hover { animation: stripes .75s infinite linear; background: linear-gradient(45deg, rgba(30,255,188,1) 25%, rgba(255,255,255,1) 25%, rgba(255,255,255,1) 50%, rgba(30,255,188,1) 50%, rgba(30,255,188,1) 75%, rgba(255,255,255,1) 75%, rgba(255,255,255,1)); background-size: 10px 10px; color: #FF50E5; } @keyframes stripes { 0% {background-position: 0 0;} 100% {background-position: 50px 0;} }
Пример 7.
Фоновая заливка кнопки создана с помощью внутренней тени блока, которая меняет свой размер при наведении плюс добавляется внешняя тень блока.
<a href="">Button</a>
body {background: #A4DADA;} a { text-decoration: none; outline: none; display: inline-block; padding: 15px 30px; margin: 10px 20px; border-radius: 10px; box-shadow: 0 0 40px 40px #F137A6 inset, 0 0 0 0 #F137A6; font-family: 'Montserrat', sans-serif; font-weight: bold; letter-spacing: 2px; color: white; transition: .15s ease-in-out; } a:hover { box-shadow: 0 0 10px 0 #F137A6 inset, 0 0 10px 4px #F137A6; color: #F137A6; }
Пример 8.
Эффект «слайда» при наведении реализуется с помощью перемещения блоков-псевдоэлементов, один из которых расположен за левой границей кнопки, второй — за правой границей.
<a href=""><span>Button</span></a>
body {background: #ebcacb;} a { text-decoration: none; outline: none; display: inline-block; margin: 10px; color: white; box-shadow: 0 0 0 2px white; padding: 20px 0; width: 150px; text-align: center; text-transform: uppercase; letter-spacing: 3px; position: relative; overflow: hidden; } span { font-family: 'Montserrat', sans-serif; position: relative; z-index: 5; } a:before, a:after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; left: 0; } a:before{ transform: translateX(-100%); background: white; transition: transform .3s cubic-bezier(.55,.055,.675,.19); } a:after { background: #413ad5; transform: translateX(100%); transition: transform .3s cubic-bezier(.16,.73,.58,.62) .3s; } a:hover:before, a:hover:after {transform: translateX(0);}
Пример 9.
Вторая рамка сгенерирована с помощью псевдоэлемента, который дублирует кнопку и при наведении меняет цвет рамки, а также высоту и ширину.
<a href="">Button</a>
body {background: #1b2631;} a { text-decoration: none; outline: none; display: inline-block; margin: 10px 20px; padding: 10px 30px; position: relative; border: 2px solid #f1c40f; color: #f1c40f; font-family: 'Montserrat', sans-serif; transition: .4s; } a:after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; margin: auto; border: 2px solid rgba(0,0,0,0); transition: .4s; } .button-container a:hover:after { border-color: #f1c40f; width: calc(100% - 10px); height: calc(100% + 10px); }
Пример 10.
Псевдоэлемент, залитый градиентом, повёрнут на 45 градусов и смещен за левую границу кнопки. При наведении он перемещается за правую границу, создавая эффект блика.
<a href="">Button</a>
body {background: #ffbfbe;} a { text-decoration: none; outline: none; display: inline-block; padding: 10px 30px; margin: 10px 20px; position: relative; overflow: hidden; border: 2px solid #fe6637; border-radius: 8px; font-family: 'Montserrat', sans-serif; color: #fe6637; transition: .2s ease-in-out; } a:before { content: ""; background: linear-gradient(90deg, rgba(255,255,255,.1), rgba(255,255,255,.5)); height: 50px; width: 50px; position: absolute; top: -8px; left: -75px; transform: skewX(-45deg); } a:hover { background: #fe6637; color: #fff; } a:hover:before { left: 150px; transition: .5s ease-in-out; }
html5book.ru
Кнопка html в меню сайта в стиле дизайна
Ссылки – это единственное, что может позволить переход с одной страницы на другую, однако простые ссылки — это полное отсутствие дизайнерской модели, поэтому нужно искать варианты того, как облагородить ссылку и придать ей красивый вид.
Кнопки для сайта html выполняют две функции: во-первых, они дают возможность перехода на заданную страницу, а во-вторых, имеют дизайн, который вписывается и гармонирует с общим стилем страницы.
Кнопка, по своей сути является той же самой ссылкой, только имеющей приятный вид и, если требуется, меняющей оттенки или форму при клике или наведении на нее.
Как сделать кнопку в html
Сделать кнопку можно двумя способами: самому или используя сервисы для создания кнопок.
Первый способ позволяет научиться и понять суть всей работы, а второй — просто получить результат, да к тому же ограниченный в возможностях.
Кнопки html для сайта — это не столько сложная работа по созданию, сколько трудоемкое оживление кнопки. Под словом «оживление» подразумевается сделать ее реагирующей на клик, наведение или изменить в момент нажатия, для чего нужно использовать CSS или JavaScript.
Кнопка с использованием изображения
Простая кнопка html имеет вид картинки-ссылки и создается путем вставки тега ‘a’ (ссылки) на тег img (изображение).
Указанный пример, по сути, является простой картинкой-ссылкой, однако может иметь любой вид и отлично вписываться в дизайн, однако данная кнопка html не может «работать», то есть менять вид в различных ситуациях.
Для того чтобы кнопка имела нестандартный вид и могла меняться в зависимости от ситуации, следует изменить ее изначальный вид и добавить CSS.
Кнопки для сайта с применением CSS
CSS — это другой язык программирования, который отвечает только за стили и называется каскадной таблицей стилей.
Код кнопки для сайта html будет иметь вид:
- <«a» h»r»e»f=»Тут следует указать адрес страницы в интернете» class=»»>
Внимание! При использовании примеров, удалите значок «, чтобы получилось a и href.
Приведенный пример — это простая ссылка, которая будет преобразована в нужном стиле при помощи CSS, где class определяет название класса в css, чтобы код был применен именно к этому элементу на странице.
- .topbutton { /*класс кнопки*/
- width:111px; /*- ширина кнопки в 111 пикселей*/
- border:1px solid #000; /*- рамка для кнопки в 1 пиксель, сплошная и черная*/
- background:#red; /*- заливка кнопки — красный*/
- text-align:left; /*- выравнивание текста на кнопке по левому краю*/
- padding:10px; /*- отступы от внешних элементов на странице*/
- color:#fff; /*- цвет текста, в данном случае белый*/
- font-family:verdana; /*- шрифт текста (можно открыть и выбрать в Word)*/
- font-size:8px; /*- размер текста на кнопке*/
- border-radius: 3px; /*- округление углов кнопки*/
- }
Примечание. /*комментарий*/ — таким образом в CSS коде можно оставлять комментарии.
Наверняка даже самому начинающему кодеру понятен смысл этого примера, но стоит сказать, что здесь используется небольшой код, который позволяет сделать самую простую кнопку, а для применение стилей при наведении или активности ссылки следует применять дополнительные теги и параметры.
Более сложная кнопка для сайта
Кнопки на сайте могут использовать не только CSS для своего внешнего вида, также применяются и другие языки программирования, позволяющие сделать качественные кнопки html сайтов, например JavaScript, который более мощный и может реализовать больше интересных идей для сайта.
Единственное различие между языками программирования — это сложность в реализации, и если JavaScript — более мощный, соответственно, и его изучение занимает больше времени.
Кроме простой задачи в виде перенаправления пользователей по другим адресам сайта, кнопка html выполняет и более серьезную работу, которая заключается в отправке данных из формы, в которую пользователь ввел свои данные, например, регистрация.
Код кнопки html в данном случае имеет вид:
- <«input» type=”botton” name=”имя кнопки для php” value=”текст, который отображается на кнопке”>
Внимание! При использовании примеров удалите «, чтобы получилось input.
Реализовать кнопку такого рода очень просто, и на примере показана рабочая кнопка, которая выполнит отправку введенных данных из формы.
- Type – определяет, что этот элемент является кнопкой.
- Name – является элементом, который делает кнопку уникальной.
- Value – отображает надпись на кнопке.
Вся проблема заключается не в том, чтобы сделать кнопку html, а в том, чтобы реализовать обработку данных, которые прислал пользователь, для чего требуется знание более сложного, но одного из самых мощных, языка программирования. PHP позволяет делать настоящие сайты и, например, некоторые готовые CMS написаны именно на нем.
Кнопки, написанные для форм, так же как и обычные, могут быть преобразованы в требуемый вид, однако их назначение имеет большую важность и несет больше ответственности.
Кроме ручного способа создания кнопки, существуют различные сервисы, которые в автоматическом режиме могут создать различные кнопки и подогнать их под ваш вкус, однако в данном способе есть ощутимый недостаток — для применения этих кнопок придется изучить html.
Изучение html потребуется для того, чтобы понять, куда устанавливается кнопка сайта — в меню, блок который выводит контент, или в footer (самый низ сайта) сайта.
fb.ru
В качестве содержания добавляйте список ol из ссылок.
Это на CSS, а можно ещё добавить небольшой скрипт.
Спасибо за Ваши толковые статьи и примеры !
dd>
, одно время не могла пройти мимо интересной кнопки, пусть даже нарисованной. Надо код немного доработать, а то в Safari кое-где ерунда получается. Например, из background следует выделить background-color
Для высоты сложнее. Можно указать одинаковую height и line-height, но line-height не поддерживается некоторыми мобильными браузерами, например, Opera Mini. Совсем убрать padding.
Можно добавить дополнительно :before http://shpargalkablog.ru/2012/04/vertical-align.html#inline-before (см. "Ура, оно")
width — ширина
height — высота
line-height должна быть равна height, чтобы выравнять текст по центру. См. http://shpargalkablog.ru/2012/03/vyrovnyat-tekst-vertikali.html
font-size — размер шрифта
Одно значение: отступ от содержимого для каждого края.
Два значения: первое для вертикальных, второе — горизонтальных сторон.
Три значения для верхней/по бокам/нижней сторон.
Четыре значения: вверх/справа/низ/слева.
См. http://shpargalkablog.ru/2011/03/svoistva-margin-padding.html#p-m-storona
П. С. К верстке сайтов не имею никакого отношения, html и CSS знаю настолько, насколько мне необходимо — изредка сваять себе хтмл-файлик, как каталог файлов. Но вот на свою голову проблемы нашел — решил сделать себе сайтик и нужна кнопка возврата на предыдущую страницу, которая появляется при адаптации при открытии сайта с моб. устройств, а там стрелочка влево нужна.
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);
}
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; нечего не изменяет
width: 500px;
padding: .8em 0 calc(.8em + 3px);
text-align: center;
если планируется кнопка на многих страницах — "как изменить шаблон wordpress". Для кнопки или ссылки в файле php добавляете класс, например, class="button16". А стили — в файл .css, например,
.button16 {……}
если для одной страницы, то должна быть кнопка для перехода в "HTML"-режим при написании/редактировании статьи. В нужное место добавляете и стили, и кнопку. Только в этом случае стили нужно вписывать обязательно внутри
<style>
… … …
</style>
Я, к сожалению, не изучала админку WP
Ирина, благодарю за комментарий!
А так вроде со всем разобрался и с цветом и размером, а вот как сделать ее ссылкой что бы при нажатии переходить на другую страницу
Заранее благодарен.
<a href="http://shpargalkablog.ru/2012/04/css-knopki.html" class="knopka">кнопка</a>
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));
Подскажите, как сделать кнопку по всей ширине блока ?
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); } /* при нажатии */
a.knopka {
display: block;
text-align: center;
}
Не могли бы вы написать полностью обновленный код в ответе для кнопки — button22, тогда все станет понятно.
Спасибо.
Комментарий 72: попробуйте так http://jsfiddle.net/NMitra/fyd1nzfk/
кнопка "button17"
за ранее буду очень признателен! спасибо!
a.button17:focus:not(:active) {}
напишите
a.button17 {}
Но обычно её делают более приглушённого цвета (плюс можно попробовать прозрачность http://shpargalkablog.ru/2013/02/opacity-css.html ).
Объясните как ребенку, т.к еще зелен в этих делах
outline: none;
http://djk-tanzen.de/?mod=anmeld
Но на safari, к сожалению не работает….
С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;
}
<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
Вот сейчас опять перечитываю в поисках как убрать подчёркивание.
Очень не хватает просто подробного описания, какой параметр что значит.
Огромное спасибо Автору странички, без информации выше было бы очень тяжко.Спасибо.
так чтобы текст на копке и иконка слева от текста были по середине кнопки. По горизонтали всё ок , Но то что иконка или текст постоянно съезжают куда то по вертикали, удручает.
Всякие комбинации служебных слов перепробовал, но понять так и не смог.
Может что подскажете. Заранее огромное Спасибо!
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);
}
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
Иконка у меня 24х24, у вас в примере 16х16 и в итоге когда я подставляю своё то у меня всегда съезжает вниз текст. Иконка стоит правильно, текст начинается где-то с её середины.
Пока разбираюсь.
Спасибо за участие и заданное направление.
За отклик и направление Огромное Спасибо.
в 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
Или чтобы код опубликовать в комментарии, можно воспользоваться формой из http://shpargalkablog.ru/2010/12/napisat-kod-tekstom.html