Разное

Css стили кнопок: Buttons Основные стили кнопок CSS уроки для начинающих академия

12.06.1970

Содержание

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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


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

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


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

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

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

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

Купить

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

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

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

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

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


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

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

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


10 999 р.

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

Как у Google

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


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

Заказать

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

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

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


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

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

скачать

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

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

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



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



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

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


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

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


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

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

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


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


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


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


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

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


Объёмная

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

кнопка Автор

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

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

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

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

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

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


Оформить

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

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


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

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



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

+

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

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

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


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



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

3d кнопка CSS


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

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

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

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

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

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

Большая коллекция кнопок CSS, кнопки HTML


    Замечательная коллекция кнопок на CSS и HTML с валидным и качественным кодом для современного сайта, чтобы оформить меню, ссылки, вход в профиль, кнопки добавить комментарии (купить, открыть, или пройти на страницу), изменить дизайн перехода на предыдущую страницу, табы и т.д.

Примеры 30 кнопок CSS3, только чистый код (без JS и картинок) , смотрим ниже!
Представляем на dle9.com замечательную коллекцию кнопок на CSS и HTML с валидным и качественным кодом.

  Дополнительно рекомендуем обзор с 26 простыми кнопками CSS, HTML, только чистый код (без JS) можно посмотреть, опробовать, по-нажимать и увидеть наглядный результат.

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


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

CSS


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


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

CSS
 
Если кому интересно читаем тут описание, из каких элементов и тегов состоит кнопка для сайта или пропускаем смотрим примеры ниже.
  Самый простой способ изменить цвет, шрифт, размер, тень, градиент и другие стили кнопки HTML не нарушая целостности кода, воспользоваться супер инструментов вашего браузере. Подойдет для этих целей Мозила, Опера, Гугл Хром, Яндекс.Браузер и другие программы в которых встроен инструмент «Веб-разработка».

Как пользоваться инструментом «Веб-разработка Firefox Mozilla» подробно инструкция в картинках.  

 


    Простая HTML кнопка для сайта может содержать значение input, при создание кнопки с тегом button по своему действию напоминает результат, получаемый с помощью тега input (с атрибутом type=»button | reset | submit»).  Функционально и внешне они относительно одинаковы. Внутри тега button каждый вебмастер может добавить отформатированный текст, или подходящее изображение. Различаются эти элементы и кнопки с применением тега input (c атрибутом type = «button») несколькими параметрами.
    Главным отличием тега button, это расширенные возможности по созданию кнопок HTML. Например, вы можете размещать любые элементы HTML и изображения. Применив стили, можно изменить внешний вид кнопки, шрифт, цвета фона, градиент, размеры и другие параметры.
 
<input type="button" value="input"/>
<button type="button">button</button>
Когда применяется тег button?
  • тег button в качестве открывающегося и закрывающегося значения, может включать дочерние теги,
    • 
  • если текст на кнопке один, то применяется значение value, а при нажатие на копку может передаваться другой.
    • 

Для оформления кнопок на CSS3, часто используются ссылки обрамленные тегами span или div, благодаря им получается сделать на CSS эффектные и симпатичные кнопки.
    Как изменить вид кнопки при наведении, сделать эффект нажатия? Динамические эффекты вы сможете реализовать с помощью псевдоклассов:
 
    :hover — при наведении. С появлением сенсорных экранов необходимость в :hover отпала. Для остальных же нужно как минимум изменение вида курсора мышки, чтобы дать понять, что элемент не является декорацией.
 
    :active — в момент нажатия кнопки. Когда на странице тут же что-то явно происходит, например, переход по ссылке, загрузка модального окна, появляется значок обработки формы, то :active можно опустить.
 
    :focus — пока кнопка в фокусе, то есть когда пользователь нажал на кнопку, но ещё не щёлкнул курсором мышки в другое место окна браузера. Без :focus невозможно объединить visibility: hidden; и transition. Если слишком быстро убрать мышку, то элемент повиснет в «половинном» состоянии, например, ссылка будет прозрачна, но по ней можно делать переход.
 
Сложнее всего сделать и продумать вид, задать параметры, понять, как должны изменяться эффекты во время нажатия кнопки, не нарушая целостность дизайна или вёрстки страницы. Чаще всего самый простой внешний вид, выглядит более стильно, чем навороченная с крутыми элементами и цветом кнопка. Большая коллекция кнопки CSS / HTML
Код кнопки для сайта
 
 HTML
<a href="#">кнопка</a>

CSS



 HTML

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

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

Градиенты плохо поддаются анимации, плавной смене цвета фона. Проблему можно решить с помощью: box-shadow .
 


 HTML

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

CSS
 
Забронировать кнопка CSS
 

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


 HTML

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

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

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


 HTML

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

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


 HTML

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

CSS

 HTML

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

CSS
 
Как у Mozilla кнопка CSS
 


 HTML

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

CSS

 HTML

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

CSS


 HTML

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

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


 HTML

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

CSS


 HTML

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

CSS
 
Стилизация кнопок с помощью CSS
 Анимированная кнопка: «свечение текста»



 HTML

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

CSS

 HTML

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

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


 HTML

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

CSS
 
Стеклянная кнопка CSS
 


 HTML

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

CSS

 HTML

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

CSS


 HTML

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

CSS


 HTML

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

CSS


 HTML

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

CSS
 
Объёмные кнопки CSS
 


 HTML

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

CSS


 HTML

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

CSS


 HTML

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

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


 HTML

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

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


 HTML

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

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

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

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

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

CSS
    
 HTML

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

CSS
     
Анимированная кнопка CSS
 
    
Анимированное заполнение (тут нет лишнего кода, связанного с кнопкой).

    
 HTML

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

CSS
    
 HTML

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

CSS
     
3d кнопка CSS
 
    
HTML

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

CSS
 
Блок кнопок — Страница 2 — Справка
 
			


 
Создание кнопки призыва к действию в классическом редакторе
 




Следующие инструкции предназначены для выполнения в классическом редакторе. Если вы используете интерфейс редактора блоков WordPress, щелкните эту ссылку.





Встроенные стили кнопок
Пользовательские CSS-стили кнопок
Встроенные CSS-стили кнопок
Советы и материалы для начала работы





↑ Содержание ↑
 
Встроенные стили кнопок
 




В некоторых темах доступны встроенные стили кнопок, которые можно применять для обычной ссылки. Для этого необходимо переключиться в вид HTML в редакторе сообщений или страницы и добавить в ссылку специальный CSS-стиль темы, называемый «класс», также известный как тег привязки.





Например, в теме Goran встроен стиль кнопок под названием (не удивляйтесь!) кнопки. Вы можете добавить этот класс для ссылки, чтобы она выглядела следующим образом:





Вот как выглядит HTML-код для кнопки в примере:




<a href="https://gorandemo.wordpress.com/">Кнопка</a>

В демонстрационном примере Goran можно увидеть, что фон кнопки меняет цвет, если навести на нее курсор на настольном компьютере или ноутбуке. Этот вид при наведении курсора также определяется CSS-стилем в теме.
Узнать, имеется ли в той или иной теме встроенный стиль для кнопок, а также какое имя класса необходимо добавить в тег привязки, можно в его описании. Несколько примеров готовых стилей кнопок призыва к действию доступны в таких темах, как Edin, Gateway, Sequential, Pique и Karuna.
Если в теме нет встроенного стиля кнопок, можно создать кнопки с собственным стилем одним из следующих методов.
↑ Содержание ↑
Пользовательские CSS-стили кнопок
Если у вас пользовательский дизайн, доступный в тарифных планах WordPress.com Premium и Business, вы можете добавлять стили кнопок на CSS-панель настройщика.
Вот примеры некоторых основных стилей кнопок:
.button {
display: inline-block;
padding: 12px 24px;
border-radius: 6px;
border: 0;
font-weight: bold;
letter-spacing: 0.0625em;
text-transform: uppercase;
background: #615f8b;
color: #fff;
}
/* Добавим новый цвет фона при наведении курсора, а текст оставим белым */
.button:hover,
.button:focus,
.button:active {
background: #b7b6cd;
color: #fff;
}

HTML-код для тега привязки будет выглядеть очень похоже на первый пример:
<a href="YOUR-LINK-HERE">Подпишитесь на мою рассылку</a>
Просто замените текст YOUR-LINK-HERE на полный URL-адрес (адрес в Интернете) страницы, которую вы хотите показывать посетителям, вместе с префиксом http:// или https://. Например, чтобы при переходе показать посетителю страницу оформления подписки на новостную рассылку, следует добавить ее URL-адрес.
Если вы используете блок кнопок в составе редактора блоков WordPress, вместо добавления кода кнопки необходимо добавить только новый CSS-класс для настройки блока кнопок в разделе Дополнительный CSS-класс.
Посмотрите, как будет выглядеть этот пример на вашем сайте.
Можно заметить, что текст кнопки написан заглавными буквами, поскольку мы указали верхний регистр в этой строке CSS-кода:
text-transform: uppercase;
Чтобы сохранить регистр текста таким, как указано при вводе, просто удалите эту строку.
Размещая части HTML-кода и CSS-кода по отдельности, можно добавлять один и тот же класс для нескольких кнопок для поддержания их согласованности и во избежание повторения CSS-кода. Это также полезно, если вы захотите что-то изменить впоследствии, например поменять цвет фона всех кнопок на оранжевый в канун Хеллоуина. Это можно сделать сразу для всех кнопок, изменив CSS-код только в одном месте.
↑ Содержание ↑
Встроенные CSS-стили кнопок
Если у вас нет пользовательского CSS-стиля, вы можете создать ссылку с базовым стилем кнопок, используя так называемые встроенные стили. Это означает, CSS-код стиля кнопки добавляется непосредственно в HTML-код. Для этого необходимо переключить редактор в режим просмотра HTML-кода.
Пример.
<a href="YOUR-LINK-HERE">Призыв к действию</a>
У этого метода есть несколько недостатков: усложняется чтение кода и устранение неполадок, весь CSS-код встроенного стиля необходимо повторять для каждой создаваемой кнопки, поэтому код все более усложняется при последующем внесении изменений. Кроме того, в таком режиме нельзя добавить стиль кнопки, отображаемый при наведении курсора.
Вот рабочая кнопка со встроенным CSS-стилем из нашего примера. При просмотре на настольном компьютере или ноутбуке попробуйте навести курсор на кнопку, чтобы увидеть, что ее стиль не изменился.
Подробные материалы
↑ Содержание ↑
Советы и материалы для начала работы
Данное руководство поможет вам начать работу над оформлением призыва к действию. Вот несколько важных аспектов, на которые следует обратить внимание.
Страниц: 1 2
Генератор кнопок CSS
Всем привет! В продолжение темы инструментов веб-разработчика, напишу про онлайн генератор кнопки CSS. Таких генераторов много. Сама – честно – не пользуюсь. Почему? Если сайт работает с Bootstrap, то в его арсенале имеются встроенные стили кнопок, которые легко переделать под себя. А если делаю верстку с нуля и без фреймворка, то стиль кнопки уже задан в PSD макете, остается только перенести ее в код.  
Какой именно использовать сервис, практически неважно, главное иметь возможность задать размер кнопки, ее цвет, тень и текст. А еще можно задать градиент. В чем прелесть генераторов кнопок – не нужно вручную прописывать префиксы свойств, они добавляются автоматически и нужны для корректного отображения в браузерах, т.е. кроссбраузерности.
1. Предлагается выбрать из 42-х готовых кнопок наиболее подходящую:
Давайте сделаем кнопку, используя генератор кнопок для сайта https://www.bestcssbuttongenerator.com/
 готовые стили кнопок
2. Справа видим все настройки:
 свойства кнопки
Там, где возле настройки поставите галочку, она будет включена. Таким образом, можно сделать кнопку без тени и тени для надписи.
Text – Текст кнопки
Кнопка — здесь указываете надпись на кнопке
Classname — название css класса для кнопки — меняйте, если нужно
Arial — здесь по умолчанию шрифт Arial, выбирайте из списка подходящий
Font Size – размер шрифта
  • bold  — жирный (ставим галочку, если нужно)
  • italic – курсив (ставим галочку, если нужно)
Size – Размер кнопки
  • Vertical Size – высота кнопки
  • Horizontal Size – ширина кнопки
Border – Граница кнопки
  • Border Radius – радиус закругления углов
  • Border Size – толщина границы
Box Shadow – Тень кнопки (если поставлена галочка)
inset – внутренняя тень (если стоит галочка)
  • Vertical Position – позиция тени по вертикали
  • Horizontal Position — позиция тени по горизонтали
  • Blur Radius — радиус размытия тени
  • Spread Radius — радиус распространения тени
Text Shadow – Тень текста (если поставлена галочка)
  • Vertical Position – размер по вертикали
  • Horizontal Position — размер по горизонтали
  • Blur Radius – радиус размытия тени
Передвигая ползунок в настройках, вы меняете значение
свойств.
3. Чтобы задать цвет, нажимайте на цветные квадратики под кнопкой. Внизу вы увидите подсказку, для какого свойства выбирается цвет. Слева направо:
 Настройка цвета кнопки и тени
Preview Box Color – цвет фона
  • Gradient Top Color – верхний градиент
  • Gradient Bottom Color – нижний градиент
  • Font Color – цвет надписи кнопки
  • Border Color – цвет границы
  • Box Shadow Color – цвет тени
  • Text Shadow Color – цвет тени надписи
И еще настройки под кнопкой, если поставите галочку:
  • transparent – это значит, что фон кнопки наследуется от родительского элемента
  • no gradient – без градиента
  • Reset – сбросить настройки, сделать по умолчанию
4. Когда кнопка готова, нажмите на нее, тогда в правой части вместо настроек появляется код, он состоит из:
  • HTML кода – скопируйте его в место нахождения кнопки
  • CSS кода – добавьте в css файл стилей вашего сайта
html и css код кнопки
4. Смотрим результат работы:
Я немного изменила для себя, добавила плавное исчезновение тени:
transition: all .4s;
и удалила свойство :active, чтобы кнопка не смещалась, мне это не нравится.
Есть еще вот такой генератор кнопок для сайта https://css3gen.com/button-generator/ — он без готовых кнопок, но настройки те же самые, просто поэтапно их задаете и получите тот же результат. Выбирайте, что удобнее.
В поиске по он-лайн генератору кнопок довольно много запросов, значит, подобные сервисы действительно пользуются спросом. Буду рада, если описание было вам полезным 🙂
 [Всего: 0   Средний:  0/5]
Этой статьёй можно поделиться 😉
Три лучших онлайн-генератора CSS-стилей для кнопок
Приветствую вас на сайте Impuls-Web!
Сегодня мы поговорим с вами об онлайн-генераторах CSS. На сегодняшний день многие пытаются сделать сайты самостоятельно, но при этом у них не всегда хватает знаний в области HTML и CSS, и для них бывает проблематично сделать какие-то простые вещи, такие как визуальное оформление какой-то кнопки, или какого-то отдельного элемента на сайте.
Навигация по статье:
Конечно же, вникать во все тонкости HTML и CSS далеко не у каждого найдется время. Поэтому, если вам необходимо применить какие-то стили для определенных элементов на сайте, то вы можете воспользоваться такими онлайн генераторами, благодаря которым, вы можете, при помощи визуального редактора, задать все необходимые настройки, а затем, просто скопировать сгенерированный код к себе на сайт.
Самая распространенная проблема, это задание стилей для кнопки, когда вы устанавливаете какой-то плагин или создаете всплывающую форму обратной связи, или делаете какую-то ссылку, и вам нужно для нее задать стили, что бы она у вас выглядела как кнопка и при этом подходила по дизайну к вашему сайту.
Онлайн-генератор CSS-свойств Uipapade
Первый сервис который поможет вам в решении этой задачи, это сервис uiparade.com. Выглядит страница сервиса следующим образом:
  1. 1.Прежде всего, мы видим здесь кнопку, для которой мы можем задать какой-то свой текст, к примеру, «Заказать».
  2. 2.Далее, вы можете при помощи ползунков регулировать внутренний отступ, то есть от границы блока до начала текста.
  3. 3.Так же можно менять размер шрифта, скругление углов, размер границы, внутреннюю и внешнюю тень.
  4. 4.Далее, чуть ниже идет три блока «Normal State», «Hover State», «Pressed State». То есть, это как бы три типа событий, которые могут происходить с данной кнопкой.
    Первый блок – это нормальное состояние,  второй – состояние при наведении, и третий – это состояние при нажатии на кнопку.
  5. 5.Для каждого из состояний вы можете задавать цвет текста. Для этого вы можете использовать палитру для подбора цветов, либо, если у вас на сайте уже используются какие-то цвета и вам нужно подгонять внешний вид данной кнопки под цвета вашего сайта, то вы можете вставить в окошко шестнадцатеричный код цвета, который вам нужен.
  6. 6.Так же вы можете изменить цвет тени текста и цвет границы.
  7. 7.Далее, вы можете сделать, что бы ваша кнопка была не просто однотонной, а градиентной. Для этого сначала задаем цвет для верхней части градиентного перехода, а затем для нижней части.
    Если вам нужно сделать, что бы кнопка была без градиента, просто однотонная, значит, вы для верхнего и для нижнего градиента просто задаете одинаковый цвет.  Это можно сделать так же, при помощи копирования шестнадцатеричного кода цвета.
  8. 8.Далее, вы все то же самое проделываете для состояния кнопки при наведении. Можете изменять здесь цвет текста, при необходимости, цвет тени текста, границу,  и к примеру, цвет самой кнопки на более темный.
  9. 9.Последнее состояние, это состояние при нажатии. Аналогичным образом либо дублируете все параметры, которые у вас идут, к примеру, для эффекта при наведении, или нормального  состояния, либо же задаете здесь какие-то другие цвета.
  10. 10.После того, как вы задали все настройки, чуть ниже у вас есть две кнопки «Generate HTML» и «Generate CSS».
    Если мы нажмем на кнопку «Generate HTML», то мы увидим, что нашу кнопку представляет собой просто обычную ссылку с классом button.
    То есть первое, что нам нужно сделать, это взять и скопировать html-код, а затем перейти на свой сайт и добавить сюда этот код.
  11. 11.После этого вам обязательно нужно будет еще скопировать css-стили. Для этого возвращаемся снова к нашему сервису, и нажимаем здесь на кнопку «Generate CSS».
    Как видите, у нас здесь css-код получился довольно таки длинный. Он идет со всевозможными кроссбраузерными префиксами, для того что бы эти свойства адекватно отображались во всех браузерах.
  12. 12.Копируем этот код, и затем открываем файл стилей вашей темы. Если ваш сайт работает на WordPress, то вы можете воспользоваться встроенным редактором WordPress. Для этого переходим в админку, и заходим здесь в раздел «Внешний вид» => «Редактор».
     Смотрим, что бы был выбран файл «Таблица стилей (style.css)».
  13. 13.Прокручиваем в самый низ и вставляем скопированные css-свойства. После чего нажимаем на кнопку «Обновить файл».
  14. 14.Далее, сохраняем изменения на странице с кнопкой и смотрим, как она выглядит.
Единственное, возможно у вас из темы для ссылок будет применяться другой цвет, и он будет перекрывать ваши стили. Для того, что бы этого не происходило, мы можем повысить приоритет наших стилей путем использования, к примеру, правила !important.
Для этого в css-коде, который мы с вами скопировали нужно найти свойство color, и затем написать перед точкой с запятой !important. После этого обновляем файл.
Аналогичным образом вы можете создавать здесь стили для уже существующей кнопки или ссылки. В этом случае вы при помощи этого визуального редактора задаете все необходимые параметры, затем нажимаете на кнопку «Generate CSS», копируете код, а вместо класса button подставляете в код тот класс ссылки, который используется на вашем сайте.
То есть, к примеру, у вас на сайте есть ссылка с классом call-back или order, или еще какая-то, то вы вместо  button просто здесь название вашего класса. Точно так же нужно заменить название класса для эффекта при наведении, и точно так же для эффекта при нажатии.
Таким образом, все заданные в онлайн-генераторе цвета и стили будут применяться для вашей ссылки.
Создание кнопки в Dextronet
Еще один сервис для генерации стилей для кнопки называется dextronet.com. принцип его работы такой же, как и у предыдущего.
  1. 1.Задаете надпись, которая должна быть на кнопке. Так же можете задавать подзаголовок или, если подзаголовок вам не нужен, убираете здесь галочку.
  2. 2.Далее задаете в пикселях размер шрифта для заголовка и для подзаголовка.
  3. 3.Цвет текста задается так же в шестнадцатеричном формате.
  4. 4.Фон кнопки вы можете или из предложенных здесь цветов, или же задать свой, вставив код цвета в поле.
  5. 5.Далее, вы можете изменить радиус скругления углов кнопки и размер внутреннего отступа текста от границы кнопки.
  6. 6.После этого нажимаем на кнопку «GET THE CODE».
  7. 7.У нас открывается вкладка, в которой написано, как можно использовать эти стили.
У вас должна быть ссылка, внутри которой текст должен быть обернут в тег strong, и она должна иметь какой-то класс.
Вы можете аналогичным образом либо скопировать html-код, вставить его к себе на страницу сайта, а затем скопировать все стили и так же добавить их в файл стилей.
Либо же вы можете привязаться к классу уже существующей на вашем сайте ссылки. В этом случае вы просто вместо класса shiny-button подставляете тот класс, который используется у вас.
Аналогичным образом добавляем код кнопки, обновляем страницу, и точно так же добавляем сгенерированный css-код.  Css-свойства вставляем, точно так же, в файл стилей в самый конец, и нажимаем кнопку «Обновить файл». После чего обновляем страницу.
Генератор CSS-стилей Itpride
Еще один сервис для генерации css-стилей для кнопок, который называется itpride.net. Здесь все настройки представлены в левой части экрана, и разделены на три вкладки: «Общие настройки», «Настройки при наведении» и «Настройки при нажатии на кнопку».
  1. 1.На каждой из вкладок свойства разделены на группы.
  2. 2.Вы здесь можете задать текст для кнопки, к примеру «Заказать звонок».
  3. 3.Далее, вы можете добавить специальный символ, то есть какую-нибудь иконку.
  4. 4.Можно задать шрифт для кнопки, цвет шрифта и его размер.
  5. 5.В следующем блоке вы можете задать тень для текста, цвет, смещение по оси х и у, а так же размытие тени.
  6. 6.Далее, вы можете задавать отступы справа и слева.
  7. 7.Можно задать толщину рамки, ее тип, цвет, радиус скругления углов, общий и по отдельности для каждого угла.
  8. 8.Далее, можно задать фон кнопки. Это может быть либо градиент, либо однотонная кнопка.
  9. 9.
    9.	Так же, здесь задаются параметры для внутренней тени, наружной тени, уровень прозрачности кнопки и анимация при смене css-свойств, для того, что бы при наведении у нас цвет кнопки менялся не резко, а постепенно.
    В раскрывающемся списке какие свойства анимировать, нужно выбрать «All», используемая функция «Easy», и длительность вы задаете уже на свое усмотрение.
  10. 10.Аналогичным образом вы задаете настройки при наведении и при нажатии. Здесь так же можно изменять цвета, размеры и т.д.
  11. 11.После того, как все параметры заданы, в правом нижнем углу экрана нажимаем на кнопку «Получить код кнопки».
Далее, аналогичным образом , если вам нужно использовать именно эту кнопку в качестве ссылки, то вы копируете html-код, вставляете в то место на сайте, где у вас она должна располагаться, а css-код вы вставляете в файл стилей вашей темы.
Если же вы хотите применить эти стили для уже существующих на вашем сайте кнопок, то после того как вы скопируете и вставите css-код в файл стилей темы, то вам еще нужно будет заменить класс button на класс той ссылки или той кнопки для которой все это все должно примениться.
Как видите все довольно просто и благодаря данным сервисам вы можете с легкостью оформлять ссылки на вашем сайте, что бы они были похожи на кнопки. При этом вам не нужно вникать в особенности написания css-кода, а достаточно просто задать необходимые параметры, а затем вставить сгенерированный код к себе на сайт.
Видеоинструкция

На этом у меня все. Если моя статья была для вас полезной, не забудьте поделиться ею в социальных сетях и подписаться на мою рассылку. Если вы используете какие-то более интересные сервисы для генерации кнопок с большим количеством возможностей, обязательно поделитесь ссылкой на них в комментариях. Спасибо за то, что посетили мой сайт и до встречи в следующих статьях.
 С уважением Юлия Гусарь
Создание 3D кнопок для с помощью CSS и jQuery
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

a.button {
    box-shadow:
        1px -1px 0 rgb(241,91,38),
        2px -2px 0 rgb(241,91,38),
        3px -3px 0 rgb(241,91,38),
        4px -4px 0 rgb(241,91,38),
        0 0 10px rgba(0,0,0,0.6);
        -webkit-box-shadow: /* Safari, Chrome */
            1px -1px 0 rgb(241,91,38),
            2px -2px 0 rgb(241,91,38),
            3px -3px 0 rgb(241,91,38),
            4px -4px 0 rgb(241,91,38),
            0 0 10px rgba(0,0,0,0.6);
        -moz-box-shadow: /* Firefox */
            1px -1px 0 rgb(241,91,38),
            2px -2px 0 rgb(241,91,38),
            3px -3px 0 rgb(241,91,38),
            4px -4px 0 rgb(241,91,38),
            0 0 10px rgba(0,0,0,0.6);
        -o-box-shadow: /* Opera */
            1px -1px 0 rgb(241,91,38),
            2px -2px 0 rgb(241,91,38),
            3px -3px 0 rgb(241,91,38),
            4px -4px 0 rgb(241,91,38),
            0 0 10px rgba(0,0,0,0.6);
    color: rgb(193,193,193);
    display: block;
    font-size: 12px;
    margin: 0;
    text-align: center;
    text-transform: uppercase;
}
a#tutorial-toggle {
    background: rgb(255,255,255);
    border-radius: 25px;
        -webkit-border-radius: 25px; /* Safari, Chrome */
        -moz-border-radius: 25px; /* Firefox */
        -o-border-radius: 25px; /* Opera */
    height: 30px;
    line-height: 30px;
    width: 30px;
}
    a.on {
        box-shadow:
            1px -1px 0 rgb(241,91,38),
            2px -2px 0 rgb(241,91,38),
            0 0 6px rgba(0,0,0,0.6);
            -webkit-box-shadow: /* Safari, Chrome */
                1px -1px 0 rgb(241,91,38),
                2px -2px 0 rgb(241,91,38),
                0 0 6px rgba(0,0,0,0.6);
            -moz-box-shadow: /* Firefox */
                1px -1px 0 rgb(241,91,38),
                2px -2px 0 rgb(241,91,38),
                0 0 6px rgba(0,0,0,0.6);
            -o-box-shadow: /* Opera */
                1px -1px 0 rgb(241,91,38),
                2px -2px 0 rgb(241,91,38),
                0 0 6px rgba(0,0,0,0.6);
        color: rgb(0,0,0);
        margin: -2px -2px 2px 2px;
    }
    a.button:active,
    a.on:active {
        box-shadow:
            1px -1px 0 rgb(241,91,38),
            0 0 3px rgba(0,0,0,0.3);
            -webkit-box-shadow: /* Safari, Chrome */
                1px -1px 0 rgb(241,91,38),
                0 0 3px rgba(0,0,0,0.3);
            -moz-box-shadow: /* Firefox */
                1px -1px 0 rgb(241,91,38),
                0 0 3px rgba(0,0,0,0.3);
            -o-box-shadow: /* Opera */
                1px -1px 0 rgb(241,91,38),
                0 0 3px rgba(0,0,0,0.3);
        margin: -3px -3px 3px 3px;
    }
Стиль кнопки загрузки
 
 Метод Описание
  $ ().кнопка ('переключение')  Переключает состояние отправки. Придает кнопке вид, что она была активирована.
  $ (). Кнопка ('удалить')  Уничтожает кнопку элемента.