Заработок в сети Интернет. Как заработать на дому в Интернете. Удаленная работа в сети.

Заработок на разработке сайтов, фриланс, своя страничка в интернете, заработать в Интернете на написании сайтов, веб мастер, вебмастер, веб программист, вебпрограммист.

Заработок в Интернет.
Удаленная работа на дому.
Все о надомной работе.

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

Добавлено автор alexxlab

Содержание

Кнопки | 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 второстепенные кнопки сначала плоские, а после наведения мышки обретают объём.

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

20 удивительных анимированных кнопок на чистом CSS

источник: 20 Amazing Pure CSS Animated Buttons
автор: Brenda Stokes Barron The Digital Inkwell

Вступление

Если вы хотите придать своему веб-сайту немного больше изящества, вам наверняка захочется исследовать и использовать анимированные кнопки CSS. Эти части кода добавляют слой интерактивности вашему сайту, который оценят большинство посетителей сайта. Кроме того, их можно использовать для придания ощущения динамики и дальнейшей помощи в укреплении вашего бренда. Ниже приведен список из 20 различных анимированных кнопок CSS, которые вы можете добавить на свой сайт с помощью довольно простого CSS.

1. Stylish Animated CSS Buttons for Bloggers

See the Pen Stylish Animated CSS Buttons For Blogger. by Prio-Soft™ (@priosoft) on CodePen.

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

Stylish Animated CSS Buttons for Bloggers.

2. Animated CSS Buttons

See the Pen animated-css-buttons by Naved khan (@Navedkhan012) on CodePen.

Этот набор анимированных кнопок CSS обладает простотой, которая делает их очень удобными в самых разных контекстах. При наведении курсора эти кнопки заполняются цветом под углами, применяют эффекты прокрутки, заливки узором и многое другое.

Animated CSS Buttons.

3. More Animated CSS Buttons

See the Pen Animated CSS Buttons by an (@annguyn) on CodePen.

Этот набор кнопок CSS очень прост, но именно это делает их привлекательными. Если вы хотите добавить немного интерактивности на свой сайт, это безопасная ставка.

More Animated CSS Buttons

4. CSS3 Buttons

See the Pen css 3 buttons by Oleg Semenov (@wemonsh) on CodePen.

Теперь эти кнопки CSS3 предлагают классные эффекты перехода. Некоторые заполняются цветом при наведении, но другие развивают эффект падающей тени, который заставляет кнопки казаться оторванными от экрана.

CSS3 Buttons

5. Simple CSS Buttons Animation

See the Pen Simple CSS buttons animation by Michael Domanych (@mhouse) on CodePen.

Как следует из названия этого набора кнопок, эти кнопки CSS просты и понятны в своем дизайне. Они предлагают скользящий цвет со всех сторон, а также заполнение от центра.

Simple CSS Buttons Animation

6. CSS + SVG Button Animation

See the Pen CSS + SVG Button Animation by Clément (@clmntclmnt) on CodePen.

Вот один анимированная кнопка, но ее эффект, несомненно, убедительный. При наведении курсора эта кнопка заполняется цветом от сторон до середины, затем вокруг кнопки появляется контрастный цветной контур.

CSS + SVG Button Animation.

7. Animation with Cubic Bezier

See the Pen animation with cubic bezier by Franca (@franca_) on CodePen.

Эта забавная кнопка добавит настоящий стиль любому веб-сайту. Когда вы наводите курсор на кнопку, текст внутри нее меняет цвет.

Animation with Cubic Bezier.

8. Pure CSS Button

See the Pen Pure CSS Button (animation with clip-path) by Marco Antônio (@thismarcoantonio) on CodePen.

Эта кнопка немного отличается от остальной части этого списка. Он имеет путь обрезки, благодаря которому при наведении курсора на текст кнопки анимация круга скользит по стрелке, превращая заостренный конец в точку.

Pure CSS Button

9. Blobs Button

See the Pen Blobs button by Hilary (@hilwat) on CodePen.

Как следует из названия, кнопка Blobs заполняется разноцветными каплями при наведении курсора. Это отличный выбор для тех, кто хочет добавить немного прихоти или веселья на свои сайты.

Blobs Button

10. Simple CSS Button Hover Effects

See the Pen Simple CSS Button Hover Effects by Natalia Reshetnikova (@natalia-reshetnikova) on CodePen.

Вот еще один набор довольно заниженных анимированных кнопок, которые все еще могут оказать реальное влияние. Некоторые эффекты включают в себя растягивание текста кнопки, саму кнопку, разделяющуюся на X-образную форму, и изменение цвета.

Simple CSS Button Hover Effects.

11. CSS Button with Hover Effect

See the Pen CSS Button With Hover Effect by Raj Kamal Chenumalla (@avvign) on CodePen.

Вот еще одна кнопка, которая предлагает супер простой дизайн. При наведении у него развивается аура, которая быстро исчезает. Тонкий, но эффективный.

CSS Button with Hover Effect.

12. 100 Days CSS Button N 045

See the Pen 100 days css Button N° 045 by Vitor Siqueira (@vitor-siqueira) on CodePen.

Эта простая кнопка имеет эффект, когда контур кнопки усиливается в цвете и преследует ее границу при наведении на нее курсора.

100 Days CSS Button N 045.

13. Pure CSS Buttons

See the Pen Pure CSS Buttons by Ishaan Saxena (@ishaansaxena) on CodePen.

Вот еще один набор супер простых кнопок CSS. Они заполняются цветом со всех сторон при наведении и могут использоваться как значки.

Pure CSS Buttons.

14. Auto Width CSS Button Flip

See the Pen Auto Width Css Button Flip by Alex Moore (@MoorLex) on CodePen.

Какой интересный вариант! Когда вы наводите курсор мыши на эту анимированную кнопку, она, кажется, наклоняется вперед, показывая другой текст на «обратной стороне» кнопки.

Auto Width CSS Button Flip.

15. Collection of Button Hover Effects

See the Pen Collection of Button Hover Effects by David Conner (@davidicus) on CodePen.

Here’s another set of animated CSS buttons that use fun hover effects to make a statement. Outline effects, fills, and color shifts make up the majority of the effects used here.

Collection of Button Hover Effects.

16. Pure CSS Button with Ring Indicator

See the Pen Pure CSS Button with Ring Indicator by Cole McCombs (@mccombsc) on CodePen.

Если вы хотите привлечь внимание к призыву к действию или чему-то в этом роде, эта кнопка может быть идеальным выбором. Он постоянно излучает кольцо из своего центра, обращая на него внимание. Затем, при наведении, кнопка подсвечивается и слегка поднимается.

Pure CSS Button with Ring Indicator

17. CSS3 Button Hover Effects with FontAwesome

See the Pen CSS3 Button Hover Effects with FontAwesome by foxeisen (@foxeisen) on CodePen.

Этот набор кнопок использует эффекты наведения в сочетании с FontAwesome для некоторых вечных вариантов дизайна. При наведении курсора на эти кнопки отображается стрелка вместо текста, текстовое смещение для размещения стрелки на кнопке и многое другое.

CSS3 Button Hover Effects with FontAwesome

18. CSS3 3D Flip Button

See the Pen CSS3 3d flip button by Sean Michael (@seansean11) on CodePen.

В отличие от всех других кнопок в этом списке, 3D Flip Button CSS3 отображает эффект при нажатии на нее. Как только вы нажмете, кнопка свернется, чтобы показать новый текст и значки. Это отличный способ указать, что форма была отправлена, например.

CSS3 3D Flip Button

19. Button Fun

See the Pen Button Fun by Jack Cuthbert (@JackCuthbert) on CodePen.

Вот еще один отличный вариант кнопки, который подойдет тем, кто ищет более сдержанный вид. Когда вы наводите курсор на эти кнопки, текст и контур изменяют цвет с эффектом ауры.

Button Fun

20. Button Shine Effect

See the Pen Button Shine Effect by Dan Mensinger (@dmensinger) on CodePen.

Последняя анимированная кнопка CSS в нашем списке — это эффект Button Shine. При наведении курсора кнопка меняет цвет и кажется светящейся, как будто свет прошел над ее поверхностью. Это просто и эффективно, идеальный уровень интерактивности, чтобы вызвать интерес к вашему сайту.

Button Shine Effect.

🐓

Большая коллекция кнопок 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 кнопки для сайта – красивые, трехмерные
От автора: приветствуем вас на страницах нашего блога. При создании веб-страниц огромную роль играют кнопки, с помощью которых осуществляются различные действия. Сегодня давайте подумаем, как их создавать и оформлять. Оформить в css кнопки для сайта на самом деле несложно, мы рассмотрим несколько типичных способов.
Как создаются кнопки
Во-первых, хотел бы начать с того, что сами кнопки можно создавать по-разному. Тут все зависит скорее от того, с какой целью она нужна. Конечно, для отправки формы, например, нужно создавать ее так:
 <input type = «submit» …>
<input type = «submit» …>
Но практически для всех остальных целей сгодится и другой вариант. Что вы вообще подразумеваете под кнопками? Многие считают, что это пункты меню или какие-то элементы, щелкнув по которым на сайте что-то меняется, раскрывается или появляется. Такие элементы можно создать следующими способами:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
 Узнать подробнее
С помощью того же тега input:
 <input type = «button» value = «Нажми меня»>
<input type = «button» value = «Нажми меня»>
Такая кнопочка ничего не будет делать и клик по ней ни к чему не приведет. Ей нужно с помощью скриптов задавать, что же произойдет при клике. Другой вариант создания:
 (или span если она должна быть строчным элементом). Естественно, этот вариант хуже тем, что вам придется дополнительно писать некоторые стили для оформления, а input type = “button” уже имеет некоторые по умолчанию.
Конечно, это немного неправильный способ создания. Его стоит использовать лишь тогда, когда нужно сделать независимую от других кнопку, которая не является элементом формы. Третий вариант:
 <input type = «image» src = «путь к рисунку»>
<input type = «image» src = «путь к рисунку»>
Input поддерживает и такой вид – чисто графический. В этом случае достаточно записать путь к файлу и выбранное изображение станет кликабельным, останется задать, что должно происходить при нажатии. Четвертый вариант:
В html есть парный тег button, который помогает создавать кнопки с различным содержимым. В этом случае преимущество заключается в том, что вы можете вставить любое содержимое непосредственно между открывающим и закрывающим тегом.
Button можно использовать как в форме, так и саму по себе. Если же результат нажатия необходимо отправить на сервер, то тег обязательно должен находиться в контейнере form для корректной работы.
Как сделать красивые кнопки для сайта на css
Что ж, с созданием все понятно, а теперь вернемся к их оформлению. Допустим, мы создали ее с помощью input, что дальше? Если вам нужно изменить внешний вид элемента, то можно воспользоваться разными css-свойствами. Например, давайте пропишем такие:
 input[type=»button»]{
 background: #8AD47D;
 border-style: ridge;
 border-radius: 10px;
}
input[type=»button»]{
 background: #8AD47D;
 border-style: ridge;
 border-radius: 10px;
}
Ширину и высоту элементу лучше не задавать, а размеры сформировать с помощью внутренних отступов. Добавим еще такие стили:
 padding: 15px;
cursor: pointer;
padding: 15px;
cursor: pointer;
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
 Узнать подробнее
Второе свойство позволяет при наведении на кнопку менять вид курсора на указательный, чтобы было понятно, что это кнопка и на нее можно нажать.
Вставка графики в кнопку. В качестве преимуществ тега button я указывал то, что можно вставить картинку. Но на самом деле ее без проблем можно сделать и в элементе input. Так даже правильнее, потому что изображение добавляется не тегом img, а с помощью задания фона. В качестве примера я использую изображение button.png.
Желательно в кнопки вставлять именно png-изображения, так как они могут хорошо улучшить внешний вид.
 background: #8AD47D url(button.png) no-repeat;
padding-left: 55px;
background: #8AD47D url(button. png) no-repeat;
padding-left: 55px;
Соответственно, запретим картинке повторяться по горизонтали и вертикали, а также дадим большой отступ слева, так как именно в этом месте мы и расположим картинку. Вернее, она станет там сама, ее положением можно управлять с помощью background-position.
Соответственно, давайте допишем позицию фона. Для примера я предлагаю разместить картинку справа, а не слева. Также для этого нам придется изменить сторону, с которой у нас внутренний отступ. Его нужно сделать справа.
 background: #8AD47D url(button.png) no-repeat right 50%;
padding-right: 55px;
background: #8AD47D url(button.png) no-repeat right 50%;
padding-right: 55px;
Позицию необязательно задавать свойством background-position, здесь мы воспользовались сокращенной записью, что позволило определить все параметры фона в одну строчку. Позиция определяется двумя значениями (первое по горизонтали, второе по вертикали). Значения можно задавать ключевыми словами, в пикселях и процентах. Наша запись показывает, что картинка будет справа по горизонтали и по центру по вертикали.
Трехмерность с помощью теней
Следующий прием выполняется с помощью одного из свойств css3 – box-shadow. Он позволяет добавить кнопке трехмерности, ведь иногда это нужно по дизайну. Раньше для этого требовалось использовать дополнительные изображения, сейчас же это вовсе необязательно, гораздо лучше использовать тень.
Сам прием очень простой, мы просто слегка смещаем тень и задаем ей цвет. Добавьте к стилям input такое свойство:
 box-shadow: 3px 3px orange;
box-shadow: 3px 3px orange;
На самом деле теней вы можете добавлять сколько угодно, просто перечисляйте их через запятую.
Внешний вид при наведении
В целом большинство кнопок как-то меняют свой внешний вид при наведении или клике по ним. Это хороший тон веб-дизайна, потому что это более удобно для пользователя, который будет видеть явно, что он навел курсор на этот элемент. Как поменять внешний вид кнопки при наведении? Используйте псевдокласс hover.
 input[type=»button»]:hover
input[type=»button»]:hover
Вот так вот селектор подошел бы в нашем случае. Он бы выбрал все input с типом button, на которые наведен курсор. Если нужно выбрать только 1 элемент, лучше к нему обращаться через стилевой класс или идентификатор. Соответственно, вы можете изменить цвет фона, текста, поменять картинку, трансформировать элемент и т.д. Если вы хотите, чтобы изменения происходили плавно, а не резко, то используйте свойство transition.
 input[type=»button»]{
 transition: 1s;
}
input[type=»button»]{
 transition: 1s;
}
Теперь все изменения внешнего вида будут происходить плавно в течение 1 секунды. Итак, сегодня мы с вами посмотрели простые css свойства, которые можно применять для оформления кнопок. Как видите, ничего сложного. Более мощную информацию вы можете найти в премиум-курсе по CSS3, а я на этом с вами прощаюсь.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
 Узнать подробнее
PSD to HTML
Верстка сайта на HTML5 и CSS3 с нуля
 Смотреть
Стиль кнопки загрузки
 
 Метод Описание
  $ ().
No related posts.
Добавить комментарий 
Ваш адрес email не будет опубликован. Обязательные поля помечены *