Как сделать кнопку в html красивой

How to Style Buttons with CSS

Styled buttons help you create cool websites. There are a lot of styles that you can apply to the buttons. Here is the guide to styling buttons.

1. Create a button

At first, create a <button> element.

2. Style your button

So, it is time to apply styles to your button. Let’s do it step by step.

We’re starting by adding these styles:

• display: inline-block to enable the ability to add width and height to our button
• background-color: #7b38d8 a fancy background color for the button
• padding: 20px makes a bit more room for our button in all four sides
• width: 200px gives a 200px width
• color: #ffffff makes our Submit text white
• text-align: center; puts our text in the center

Let’s see what we’ve got so far:

Now, we’re going to round our borders and use the border property. Also, let’s make our text a bit larger. So add these lines to the code:

Here’s the result

Much better, right?

Let’s add cursor: pointer to have the handicon while bringing our cursor to the button and give it a bit margin of 5px, so :

Here’s the updated result, try to move your cursor towards the button!

You need to be aware of a tiny difference here. In the previous example, when we move the cursor to the Submit text, it’ll be turned to a hand. But now the whole button will turn to a hand as soon as we move the mouse towards it!

3. Style the hover state

Your third step is to style the hover state to give visual feedback to the user when the button’s state changes.

Here’s the result, but we have a problem!

Changing the colour on hover is too fast, and it’s not so pleasant!

So let’s add transition and be careful that we have to use it in the button element, not in its hover state.

I like it! So much better!

Now, as the last step, let’s add functionality to our beautiful button. We want to open an alert whenever clicking on this button.

So click on the button below, and let’s greet!

We just used onclick event of javascript and alert something on the screen after clicking the button!

Now let’s see an interesting example using the <button> element.

Example of styling a button created with the <button> tag:

The codes you see here are similar to what we’ve done in the previous example.

Here, we used a span tag inside of the button. We can later use the :after pseudo-class to create a creative hover effect.

We’ll place the arrow sign » on our button, which will show it on the hover effect of the mouse, with a smooth transition.

Here’s the essential part of the above code:

Here’s the result:

Example of styling a button created with the <span> tag:

The code above is the final code, and you can see the result in the «Try it Yourself» section.

Now let’s break down the code and explain the tricky parts to make you understand it well. We explain that parts in snippets below as comments in front of each line.

We applied some general styles on body, and then we have a wrapper class which acts like a wrapper parent for two tags which in this example will be treated like buttons.

You can read the comments below for more explanation.

Example of styling a button created with the <a> tag:

Let’s learn what happens here in the essential parts of the code.

Example of styling the <button> element:

Let’s break down the tricky parts of the code!

But before that, please note that these examples just give you a hint or a whole idea of being creative with buttons to build or use on your web journey!

The best way to understand them is to open it in the demo section (Try it Yourself!) and play with the properties or have it in your code editor and check them.

We give you the hints and necessary tips and explanations that you may need along the way to understand it better.

So with that being said, let’s explain some essential parts of the above code:

Example of styling some <button> elements:

And here’s another example, let’s explain some tricky parts of it down below:

CSS Buttons

Use the background-color property to change the background color of a button:

Example

Button Sizes

Use the font-size property to change the font size of a button:

Example

Use the padding property to change the padding of a button:

10px 24px 12px 28px 14px 40px 32px 16px 16px

Example

Rounded Buttons

Use the border-radius property to add rounded corners to a button:

Example

Colored Button Borders

Use the border property to add a colored border to a button:

Example

Hoverable Buttons

Use the :hover selector to change the style of a button when you move the mouse over it.

Tip: Use the transition-duration property to determine the speed of the «hover» effect:

Example

.button <
transition-duration: 0.4s;
>

.button:hover <
background-color: #4CAF50; /* Green */
color: white;
>
.

Shadow Buttons

Use the box-shadow property to add shadows to a button:

Example

.button1 <
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
>

.button2:hover <
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
>

Disabled Buttons

Use the opacity property to add transparency to a button (creates a «disabled» look).

Tip: You can also add the cursor property with a value of «not-allowed», which will display a «no parking sign» when you mouse over the button:

Example

Button Width

By default, the size of the button is determined by its text content (as wide as its content). Use the width property to change the width of a button:

Example

Button Groups

Remove margins and add float:left to each button to create a button group:

Example

Bordered Button Group

Use the border property to create a bordered button group:

Example

Vertical Button Group

Use display:block instead of float:left to group the buttons below each other, instead of side by side:

Example

Button on Image

Button

Введение в основы современных CSS кнопок

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

Сначала нам нужно освежить в памяти парочку основных моментов по CSS кнопкам. То, что вы понимаете разницу между Flat UI и Material Design, не имеет смысла, если вы не знаете, какие компоненты CSS нужно менять. Быстренько пробежимся по основам CSS кнопок.

Основы CSS кнопок

Для всех сайтов хорошая кнопка это понятие субъективное, но существует парочка общих нетехнических стандартов:

Доступность – Самое важное. Люди с ограниченными возможностями и старыми браузерами должны иметь простой доступ к кнопкам. Открытость интернета для всех и каждого это прекрасно, не разрушайте ее своим ленивым кодом.

Простой текст – Внутри кнопок пишите простой и короткий текст. Пользователи должны сразу понять назначение кнопки и куда она их приведет.

Профессия Frontend-разработчик PRO

Готовим Frontend-разработчиков с нуля

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

Почти все кнопки, которые вы видите в интернете, используют какие-либо смены цветов, рамок и теней. Сделать это можно через различные CSS псевдоклассы. Мы остановимся на двух, :hover и :active. Псевдокласс :hover отвечает за поведение CSS при наведении курсора мыши над объектом. :active по большей части выполняется в момент, когда пользователь нажал кнопку мыши, но еще ее не отпустил.

С помощью псевдоклассов можно полностью изменить внешний вид кнопки, но это не user-friendly подход. Новичкам хорошо добавлять небольшие изменения в основные стили кнопки, почти полностью сохраняя ее внешний вид. В кнопках можно выделить 3 основные момент – цвет, тени и время перехода.

Основной момент 1 – Цвет

Данный параметр меняют чаще всего. Сменить цвет можно с помощью различных свойств, самые простые color, background-color и border. Перед показом примеров давайте разберем, как выбрать цвет кнопки:

Комбинации цветов – Используйте дополняющие друг друга цвета. Colorhexa – замечательный инструмент, там вы сможете найти сочетающиеся цвета. Если вы еще ищите цвета, загляните на Flat UI color picker.

Соблюдайте цвета палитры – Соблюдать цветовую палитру – хорошая практика. Если вы ищите палитры цветов, зайдите на lolcolors.

Основной момент 2 – Тени

С помощью box-shadow объекту можно добавить тень. Каждой стороне можно создать свою собственную тень. Идея реализована как в обоих дизайнах Flat UI и Material Design. Более подробно о свойстве box-shadow можно почитать на MDN box-shadow docs.

Основной момент 3 – Время плавного перехода

Свойство transition-duration добавляет к вашим CSS изменениям временную шкалу. В кнопке без времени плавного перехода стили моментально меняются на стили псевдокласса :hover, что может оттолкнуть пользователя. В этом руководстве много кнопок используют время перехода для того, чтобы кнопки выглядели натуральнее. В примере ниже в состоянии :hover стили кнопки меняются медленно (за 0.5 секунды):

А смотрится это так:

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

Есть множество сложных и интересных способов изменять поведение свойства transition, демо выше лишь показали основные моменты.

Три стиля кнопок

1 – Простые черные и белые

Обычно, такие кнопки я добавляю в первую очередь в свои сторонние проекты, так как они просто работают с множеством различных стилей. Данный стиль работает на контрасте черного и белого. Оба варианта одинаковы, поэтому мы рассмотрим код только для черной кнопки с белым фоном. Чтобы перекрасить кнопку в другой цвет, просто поменяйте все white и black местами.

В стилях выше видно, что свойства font и background-color меняют свои значения со свойством transition-duration: .2s. Это простой пример. Вы можете взять цвета своих любимых брендов и создать свою кнопку. Цвета брендов можно найти на BrandColors.

2- Кнопки Flat UI

Flat UI делает упор на минимализм – больше действий, меньше движений. Как правило, я перехожу с просто черно-белых кнопок на Flat UI, когда проект начинает обретать форму. Кнопки Flat UI имеют минималистичный вид и подходят под большинство дизайнов. Исправим нашу кнопку сверху и добавим ей движения, имитируя 3D эффект.

В демо пять кнопок, но так как у всех меняется только цвет, мы рассмотрим первую.

У кнопки 3 состояния: обычное (без состояния), :hover и :active. Обратите внимание, что состояние :hover содержит всего одну строку с уменьшением прозрачности. Полезный трюк – кнопка становится чуть светлее, и вам не нужно подбирать более светлый цвет.

Переменные в CSS уже не самая новая функция, но некоторые из них тут используются по-другому. Вместо того, чтобы указать сплошную рамку border, тут указываются свойства border-bottom, border-left и border-right, которые создают 3D эффект глубины. Псевдокласс :active часто используется в Flat UI. Когда наша кнопка становится :active происходит 2 вещи:

:border-bottom меняется с 3px до 1px. Тень под кнопкой уменьшается, а кнопка опускается на пару пикселей. Вроде бы просто, но так пользователь чувствует, что он «вдавил» кнопку в страницу.

Изменение цвета. Фон темнеет, имитируя смещение кнопки от пользователя к экрану. И опять, такой простой эффект показывает пользователю, что он нажал кнопку.

Во Flat UI ценятся простые и минималистичные движения кнопок, «рассказывающие большую историю». Многие имитирует сдвиг кнопки с помощью :border-bottom. Стоит также сказать, что во Flat UI есть кнопки, которые вообще не двигаются, а только лишь меняют цвет.

3 — Material Design

Material Design – стиль дизайна, который продвигает идею передачи информации в виде карточек с различной анимацией для привлечения внимания. Material Design создал Google, на странице Material Design Homepage они описали 3 основных принципа:

Слово Материальный не переводится буквально, это метафора

Монотонность, графика, агрессивность

Значение передается при помощи движений

Чтобы лучше понять 3 этих принципа, взгляните на демо MD ниже:

Эти кнопки используют две основные идеи – свойство box-shadow и Polymer. Polymer – фреймворк компонентов и инструментов для создания, упрощающий процесс проектирования веб-сайтов. Если вы работали с Bootstrap, Polymer не сильно отличается. Эффект распространяющейся волны на кнопках выше добавляется всего одной строкой кода.

Как создать красивую кнопку на сайте?

Многие из моих сокурсников задавались вопросом, когда в нашем техникуме проходила сдача курсовой работы, конечной целью которой было – сверстать сайт, как же я создаю такие красивые кнопочки? Честно сказать, я и сам поначалу задавался вопросом, как же создавать на сайте таки прикольные кнопки, а не просто вставлять слово, просто подчёркнутое чертой и имеющее немного другой цвет, а при переходе и вовсе блювотно-фиолетовый оттенок.

Рисунок 1: Пример кнопок

И вот, штудируя просторы всемирной паутины, я наткнулся на стили, которые используются для создания сайта. Стили – это по сути совершенно другой язык (я бы даже сказал, расширенный набор параметров), немного отличающийся от того же HTML. В моём понимании HTML выступает неким каркасом сайта, в то время как CSS – это непосредственно его красота. По аналогичному примеру можно разобрать человека: скелет и мышцы, с кожным покровом. После длительного изучения стилей и тестирования их на множестве файлов с названием test.html и test_1.html, я полностью принял их и понял, что используя стили, становиться проще, да и приятнее создавать сайт.

Сразу отмечу, что в этом уроке я не буду затрагивать тему, по типу видов подключения стилей, а также основных построений конструкций сайта, а сразу перейду к делу, пошагово описывая процесс создания. Но если вам всё же интересно почитать мои мысли об этом всём, предлагаю вам порыскать на нашем сайте статейку, направленную именно на эти темы.

Создаём структуру кнопки на HTML

Для начала нам необходимо создать первичную структуру сайта: HTML – HEAD — STYLE – BODY.

Ну и, конечно же, как вы можете заметить, сами стили я буду использовать в самом документе сайта, хоть это и не правильно, но каждый видит по-своему. Переходим к нашему созданию. В первую очередь создадим контейнер (DIV) и завернём его в ссылку (A). Ах да, чуть не забыл… Для контейнера DIV, нужно прописать атрибут class и присвоить ему значение «button». Выглядеть это всё, будет следующим образом:

Половина дела сделана, осталась вторая половина. Переходим к стилям, и начинает творить чудеса. В разделе STYLE обращаемся к классу нашей кнопки и прописываем различные атрибуты, влияющие на её форму и внешние признаки. Код страницы будет выглядеть следующим образом.

Рисунок 2: Получившийся элемент

Да, вот они самые стили. Разберемся, что здесь происходит и как настраивать кнопку, в зависимости от параметров.

• width – этот параметр отвечает за ширину кнопки, в моём случае 200 идеально подходит для размера.
• height – параметр, отвечающий за высоту кнопки.
• background-color – один из параметров заднего фона. В данном случае цвет. Углубляясь в оптимизацию сайта и более быструю загрузку, я понял, что лучше всего весь сайт создавать при помощи цветов, напрочь отказавшись от картинок. Даже если вы используете градиентный рисунок, намного оптимальнее будет задать его через свойство gradient. Это ускорит загрузку сайта, хоть и не намного. #000 – в данном случае это значение цвета, заданное в 16-тиричной системе счисления. Можно также задать значения black, red. green или же попросту указать rgb(24, 74, 64). Все методы сработают.
• border – radius – параметр, отвечающий за небольшое закругление, вокруг кнопки по краям, в моём случае, это 10 пикселей.
• color – иногда в моей голове случаются сильные конвульсии и я зачастую путаю color с background-color, а так, этот параметр меняет цвет текста или какого-либо символа.
• font-size – один из параметров, меняющих размер шрифта, указывается в таких значениях как пиксели (px) или же пункты (pt).
• text-align – параметр отвечающий за положение текста, слева (left), справа (right), по центру (center), по ширине (justify).
• padding-top – параметр отвечающий за отступы, в данном случае отступ сверху на 7,5 пикселей. Это своего рода некоторый костыль, который выравнивает положение текста посредине блока.
• cursor: pointer – параметр, служащий для изменения курсора при наведении.
• font-family – и собственно ещё один из параметров, отвечающих за шрифт. К слову, impact является одним из стандартных шрифтов WINDOWS, однако зачастую отсутствующий на телефонах с операционной системой android.
• Следующим этапом, следует убрать подчеркивание текста в кнопке, которое появиться если вы пропишите атрибут HREF в ссылке (А).

Именно этот кусок текста, следует вставить после параметров класса BUTTON или же перед ним. Свойство, что прописано в этом классе, отключает подчеркивание кнопки, что собственно нам и нужно.

Как добавить иконку в кнопке?

Иногда красивой кнопки становиться мало, и хочется нечто большего. В такой момент приходит помощь, в создании небольшой иконки, перед или же после текста.

Рисунок 3: Иконка в кнопке

Как же это сделать?
Переходи к редактированию кода, указанного выше. Нам следует добавить элемент IMG непосредственно в сам контейнер кнопки DIV, а так же указать у него один из атрибутов SRC – отвечающий за путь до картинки.

Рисунок 4: Кнопочка с иконочкой

Сразу скажу, что с первого раза может не получиться. И ваша кнопка немного съедет. Окажется немного выше или ниже положенного положения.

Именно меня такая кнопка не устраивает, поскольку иконка кажется для меня слишком большой. Переходим к написанию стилей. Уменьшим иконку и выровняем её относительно текста. Делается это следующим образом:

Рисунок 5: Кнопка с уменьшенной иконкой

Разберёмся, что тут происходит:

• float – параметр, позволяющий обтекать кнопку с левой (left) или правой стороны (right);
• margin-top и margin-left – это невидимые границы, создающий отступы с верхней стороны и левой стороны. Так-же можно задать отступы с низу (bottom) и права (right);
• width – ширина картинки.
• height – высота картинки.

Именно таким способом, можно создать красивую кнопку на сайте, привлекающую к себе внимание, что играет немало важную роль в создании сайта.
Полный код страницы: