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


Быстрая навигация по этой странице:

  • О чем речь?
  • Онлайн-сервис 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

Как оформлять в сss кнопки для сайта

От автора: приветствуем вас на страницах нашего блога. При создании веб-страниц огромную роль играют кнопки, с помощью которых осуществляются различные действия. Сегодня давайте подумаем, как их создавать и оформлять. Оформить в 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

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

shpargalkablog.ru


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.