Быстрая навигация по этой странице:
- О чем речь?
- Онлайн-сервис Da Button Factory
- Онлайн-генератор Cool Text
Кнопка — это обязательный графический элемент, без которого трудно представить дизайн сайта. Это красиво в оформлении, полезно для посетителя и для дальнейшего продвижения бизнеса, поскольку кнопки — это возможность предугадывать действия посетителей на сайте (например, мотивировать его на подписание на рассылку или регистрацию). Удобнее всего разрабатывать их внешний вид и дизайн в браузере, в режиме онлайн. И поэтому мы рассмотрим самые удобные и практичные сервисы, которые помогают создавать кнопки для сайта онлайн. По крайней мере, если уж в онлайне можно целые комиксы делать, то с созданием кнопок вообще не должно быть никаких проблем.
О чем речь?
В общей сложности существует большое количество способов создания кнопок для сайта, но лучше всего рассмотреть бесплатные сервисы, которые представляют собой онлайн-генераторы. Они позволяют сделать кнопки быстро, самостоятельно и не используя специальные программы. Такие сервисы являются оптимальным соотношением функциональных возможностей, простоты использования и качества конечного результата, когда требования к дизайну небольшие и за это не надо платить деньги.
Онлайн-сервисы предлагают своим пользователям уже готовые шаблоны кнопок, которые можно редактировать с помощью различных функций и эффектов. Создание кнопки на таком сайте можно описать в два шага: выбор подходящего стиля кнопки и используемого шрифта для текста, затем — их редактирование и придание желаемого внешнего вида с помощью функций.
Рассмотрим два моих любимых онлайн-генератора кнопок для сайта.
Онлайн-сервис Da Button Factory
http://dabuttonfactory.com/
Сайт очень удобен для каждого пользователя. На главной странице предоставляется набор инструментов, с помощью которых можно ввести текст кнопки, определить вид и размер шрифта, задать цвет или несколько цветов, используя градиент и так далее. Также можно настраивать различные эффекты кнопки — точный размер, смена цвета при наведении курсором, формат, в котором будет сохранена кнопка, в общем, создать кнопку для сайта онлайн на сервисе Da Button Factory очень просто.
Во время создания кнопок виден пример того, что должно получиться, поэтому всегда можно регулировать цвета, форму и размеры. Сервис англоязычный, однако никаких трудностей во время использования не возникает — все просто и понятно: «Size» — размер кнопки или шрифта, «Color» — их цвет, «Text» — текст внутри, «Font» — необходимый шрифт. В области «Style» можно выбрать стилевое оформление углов кнопки (всего их три вида). Область «Border» предназначена для определения рамок кнопки, а с помощью «Download» можно загрузить готовую кнопку на компьютер в том расширении, который предварительно выбран. В целом, сервис заслуживает твердой четверки. Единственным недостатком может являться простота оформления и не слишком широкие функциональные возможности.
Онлайн-генератор Cool Text
http://cooltext.com/
Ещё один простой и понятный для всех онлайн-сервис для создания кнопок, который из готовых шаблонов поможет бесплатно создать и отредактировать кнопки для сайта. Создание кнопок для сайта онлайн в этом сервисе предусматривает простую работу со шрифтами и графическими редакторами. В базе этого сервиса содержится более 1200 различных шрифтов, которые поддерживают кириллицу — надписи на кнопках можно делать и на русском языке.
Кроме этого, доступны различные эффекты для внешнего вида кнопок — можно применять эффекты геля, стекла, наложения теней и создание 3D-изображения.
ступно создание кнопки, которая меняет свой цвет, если на неё навести курсором. Практически все функциональные клавиши созданы и работают по тому же принципу, что и в предыдущем сервисе, то есть никаких сложностей во время работы возникать не будет. Данная программа для создания кнопок для сайта тоже может оцениваться на твердую четверку — кнопки обладают приятным внешним видом, работать просто, эргономичный дизайн и возможности позволяют делать простые, но в то же время красивые кнопки.
www.runcms.org
От автора: приветствуем вас на страницах нашего блога. При создании веб-страниц огромную роль играют кнопки, с помощью которых осуществляются различные действия. Сегодня давайте подумаем, как их создавать и оформлять. Оформить в css кнопки для сайта на самом деле несложно, мы рассмотрим несколько типичных способов.
Как создаются кнопки
Во-первых, хотел бы начать с того, что сами кнопки можно создавать по-разному. Тут все зависит скорее от того, с какой целью она нужна. Конечно, для отправки формы, например, нужно создавать ее так:
Но практически для всех остальных целей сгодится и другой вариант. Что вы вообще подразумеваете под кнопками? Многие считают, что это пункты меню или какие-то элементы, щелкнув по которым на сайте что-то меняется, раскрывается или появляется. Такие элементы можно создать следующими способами:
С помощью того же тега input:
Такая кнопочка ничего не будет делать и клик по ней ни к чему не приведет. Ей нужно с помощью скриптов задавать, что же произойдет при клике. Другой вариант создания:
(или span если она должна быть строчным элементом). Естественно, этот вариант хуже тем, что вам придется дополнительно писать некоторые стили для оформления, а input type = “button” уже имеет некоторые по умолчанию.
Конечно, это немного неправильный способ создания. Его стоит использовать лишь тогда, когда нужно сделать независимую от других кнопку, которая не является элементом формы. Третий вариант:
Input поддерживает и такой вид – чисто графический. В этом случае достаточно записать путь к файлу и выбранное изображение станет кликабельным, останется задать, что должно происходить при нажатии. Четвертый вариант:
В html есть парный тег button, который помогает создавать кнопки с различным содержимым. В этом случае преимущество заключается в том, что вы можете вставить любое содержимое непосредственно между открывающим и закрывающим тегом.
Button можно использовать как в форме, так и саму по себе. Если же результат нажатия необходимо отправить на сервер, то тег обязательно должен находиться в контейнере form для корректной работы.
Как сделать красивые кнопки для сайта на css
Что ж, с созданием все понятно, а теперь вернемся к их оформлению. Допустим, мы создали ее с помощью input, что дальше? Если вам нужно изменить внешний вид элемента, то можно воспользоваться разными css-свойствами. Например, давайте пропишем такие:
Ширину и высоту элементу лучше не задавать, а размеры сформировать с помощью внутренних отступов. Добавим еще такие стили:
Второе свойство позволяет при наведении на кнопку менять вид курсора на указательный, чтобы было понятно, что это кнопка и на нее можно нажать.
Вставка графики в кнопку. В качестве преимуществ тега button я указывал то, что можно вставить картинку. Но на самом деле ее без проблем можно сделать и в элементе input. Так даже правильнее, потому что изображение добавляется не тегом img, а с помощью задания фона. В качестве примера я использую изображение button.png.
Желательно в кнопки вставлять именно png-изображения, так как они могут хорошо улучшить внешний вид.
Соответственно, запретим картинке повторяться по горизонтали и вертикали, а также дадим большой отступ слева, так как именно в этом месте мы и расположим картинку. Вернее, она станет там сама, ее положением можно управлять с помощью background-position.
Соответственно, давайте допишем позицию фона. Для примера я предлагаю разместить картинку справа, а не слева. Также для этого нам придется изменить сторону, с которой у нас внутренний отступ. Его нужно сделать справа.
Позицию необязательно задавать свойством background-position, здесь мы воспользовались сокращенной записью, что позволило определить все параметры фона в одну строчку. Позиция определяется двумя значениями (первое по горизонтали, второе по вертикали). Значения можно задавать ключевыми словами, в пикселях и процентах. Наша запись показывает, что картинка будет справа по горизонтали и по центру по вертикали.
Трехмерность с помощью теней
Следующий прием выполняется с помощью одного из свойств css3 – box-shadow. Он позволяет добавить кнопке трехмерности, ведь иногда это нужно по дизайну. Раньше для этого требовалось использовать дополнительные изображения, сейчас же это вовсе необязательно, гораздо лучше использовать тень.
Сам прием очень простой, мы просто слегка смещаем тень и задаем ей цвет. Добавьте к стилям input такое свойство:
На самом деле теней вы можете добавлять сколько угодно, просто перечисляйте их через запятую.
Внешний вид при наведении
В целом большинство кнопок как-то меняют свой внешний вид при наведении или клике по ним. Это хороший тон веб-дизайна, потому что это более удобно для пользователя, который будет видеть явно, что он навел курсор на этот элемент. Как поменять внешний вид кнопки при наведении? Используйте псевдокласс hover.
Вот так вот селектор подошел бы в нашем случае. Он бы выбрал все input с типом button, на которые наведен курсор. Если нужно выбрать только 1 элемент, лучше к нему обращаться через стилевой класс или идентификатор. Соответственно, вы можете изменить цвет фона, текста, поменять картинку, трансформировать элемент и т.д. Если вы хотите, чтобы изменения происходили плавно, а не резко, то используйте свойство transition.
Теперь все изменения внешнего вида будут происходить плавно в течение 1 секунды. Итак, сегодня мы с вами посмотрели простые css свойства, которые можно применять для оформления кнопок. Как видите, ничего сложного. Более мощную информацию вы можете найти в премиум-курсе по CSS3, а я на этом с вами прощаюсь.
webformyself.com
Вы — разработчик в поисках качественного онлайн-сервиса для конструирования кнопок? Если да, то у меня есть для вас отличная подборка. Ниже приводится мой список из 10 лучших онлайн-ресурсов для построения кнопок. Кнопки представляют собой важные элементы интерфейса наших веб-сайтов, и данные сервисы позволят вам конструировать великолепные кнопки.
Почитайте о каждом из них и тщательно протестируйте их. Найдите те, которые смогут облегчить ваш труд.
01. Button Maker
Button Maker — замечательный бесплатный сервис генерации CSS-кодов для ваших кнопок. Различные детали кнопки можно окрашивать в разные цвета. Ползунки, расположенные над определителями цвета, позволяют вам варьировать размер и форму кнопки, следя за изменениями в окне слева. Для получения кода нажмите на саму кнопку.
02. Da Button Factory
Da Button Factory предлагает вам отличные инструменты для построения кнопок. Вы можете варьировать размер кнопки, цвета и вид шрифта, оттенять его, а также выбирать конечный формат (PNG / JPEG / GIF / ICO). В процессе работы кнопка постоянно обновляется в соответствии с вносимыми вами изменениями. Завершив её построение, вы можете выполнить загрузку нажатием на неё же.
03. Buttonator — ресурс больше не существует
Ещё один отличный онлайн-сервис для построения кнопок, Buttonator, предоставит вам практически все возможности для решения данной задачи. Начать можно с выбора определённого стиля оформления кнопки в правой панели. А далее вы можете вносить в него изменения; в том числе, варьировать цвет и начертание/размер шрифта. Загружать кнопки можно в виде GIF-файлов.
04. Free Flash Button Generator — больше не существует
Если вы ищете ресурс для конструирования Flash-кнопок, то сервис Free Flash Button Generator справится с этой задачей на «отлично». Сначала выбираете стиль оформления кнопки. Цвет можно варьировать посредством подбора шестнадцатиричных цифровых значений. В нижней панели можно снабжать кнопки ссылками и присваивать этим ссылкам имена. Нажатием на окончательный вариант кнопки запускается процесс её создания и составления соответствующей HTML-кодировки.
05. Cool RGB
Cool RGB — замечательный веб-сайт для конструирования различных элементов веб-страницы. Здесь можно создавать логотипы, баннеры, панели и, разумеется, кнопки. Интерфейс построения кнопок адаптируется через множество опций — от выбора шрифтов и цветов до установки уровня прозрачности и линейных углов наклона.
06. As Button Generator
Сервис As Button Generator позволяет вам конструировать кнопки, выполняя редактирование в интерфейсе, составленном из вкладок. Имеется много опций для адаптации, которых вполне хватит на построение ваших кнопок. Готовое изображение загружается в виде PNG-файла.
07. HTML and CSS Rounded Corner Button Generator — больше не существует
Сайт предназначен для разработчиков, ищущих очень простой, но вдвойне полезный онлайн-сервис построения кнопок. HTML and CSS Rounded Corner Button Generator позволяет вам не только конструировать кнопки, но и варьировать их цвета, а также предоставляет вам ZIP-архив с файлом PNG-изображения кнопки, HTML- и CSS-кодами.
08. Feed Icon — больше не существует
Если вы ищете сервис для построения простой иконки веб-каналов, то Feed Icon — лучшее решение. Вам лишь нужно указать URL-адрес своего веб-сайта, а затем выбрать один из 3 предложенных вариантов HTML-кода. Три варианта кодировки предусматривают одну и ту же форму иконки, но разные её размеры.
09. Adam Kalsey’s Button Maker
У данного сервиса построения кнопок от Эдама Кэлси (Adam Kalsey) очень простой интерфейс. Иконку можно разделить чертой и задать интервал в пикселях между этой границей и краем кнопки.
10. Button Maker — Больше не существует
Сервис очень похож на ресурс Эдама Кэлси, но его важное отличие состоит в том, что вы можете выбирать позицию разделительной черты — «слева», «по центру» или «справа». Выбирать можно и один из двух предлагаемых вариантов размера кнопки.
www.coolwebmasters.com
Вашему вниманию предлагается новая коллекция идей, как можно красиво оформить кнопки для сайта. Необычные эффекты созданы с помощью фоновых заливок, тени блока, трансформаций и псевдоэлементов. Большинство примеров реализованы на основе одного элемента — <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
shpargalkablog.ru
В качестве содержания добавляйте список ol из ссылок.
Это на CSS, а можно ещё добавить небольшой скрипт.
Спасибо за Ваши толковые статьи и примеры !
Для высоты сложнее. Можно указать одинаковую 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