Кнопка круглая css: Как сделать стиль круглые кнопки

Содержание

Создайте круглую кнопку в BS3

Я хочу создать закругленную кнопку в BS3(идеальный круг) с одним значком fontawesome (4.0) в центре.

До сих пор у меня есть следующий код:

HTML:

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

Что такое CSS markup, чтобы сделать эту кнопку идеальным кругом?

css

twitter-bootstrap

twitter-bootstrap-3

Поделиться

Источник

alias51

26 октября 2013 в 00:03

9 ответов

вы можете сделать что — то вроде добавления класса для добавления радиуса границы

HTML:

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

CSS:

.btn-circle {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.42;
  border-radius: 15px;
}

в случае, если вы хотите изменить размер, вам необходимо соответствующим образом изменить размер шрифта или отступы

Поделиться

Tarik

26 октября 2013 в 00:08

(Не тестировался в кросс-браузере), но это мой ответ:

.btn-circle {
  width: 40px;
  height: 40px;
  line-height: 40px; /* adjust line height to align vertically*/
  padding:0;
  border-radius: 50%;
}

вертикальный центр с помощью свойства line-height
заполнение становится бесполезным и должно быть сброшено
граница-радиус, не зависящий от размера кнопки

Поделиться

chocopoche

19 мая 2014 в 10:12

Boostrap 3 имеет компонент именно для этого. Это:

<span>100</span>

Поделиться

Citizen

22 июня 2015 в 02:53

Как создать круглую кнопку в android с изображением на заднем плане?
Я хочу создать круглую кнопку в android. Это xml, который я использую: <?xml version=1.0 encoding=utf-8?> <shape xmlns:android=http://schemas.android.com/apk/res/android android:shape=oval> <solid android:color=#9F2200/> <stroke android:width=2dp android:color=#fff />…
реализуйте круглую кнопку iOS в Android
Я пытаюсь создать круглую кнопку iOS в Android. Как вы, возможно, знаете, кнопки Android имеют серый фон, в то время как круглая кнопка iOS имеет четкий фон. Для этого я должен использовать стили и темы. Однако я не знаю, как собрать все воедино. Не мог бы кто-нибудь дать какой-нибудь совет?…

Это лучшая ссылка с использованием шрифта-awesome.

http://bootsnipp.com/snippets/featured/circle-button ?

CSS:

    .btn-circle { width: 30px; height: 30px; text-align: center;padding: 6px 0;font-size: 12px;line-height: 1.428571429;border-radius: 15px;}.btn-circle.btn-lg {width: 50px;height: 50px;padding: 10px 16px;font-size: 18px;line-height:1.33;border-radius: 25px;}

Поделиться

zakaiter

08 марта 2015 в 21:21

С помощью шрифта Awesome ICONS я использовал следующий код для создания круглой кнопки/изображения с цветом по вашему выбору.

<code>

<span></span>

</code>

Поделиться

Mir

13 августа 2014 в 11:48

У меня была та же проблема, и я придумал очень простое решение, работающее для всех кнопок (xs, sm, normal и lg) более или менее :

.btn-circle {
    border-radius: 50%;
    padding: 0.1em;
    width:1.8em;
}

Разница между btn-xs и-sm заключается только в их заполнении. И это не покрывается этим фрагментом. Этот фрагмент кода вычисляет размеры только на основе размера шрифта.

Поделиться

Itchy

14 июня 2015 в 11:54

Если вы загрузили эти файлы локально, вы можете изменить следующие классы в bootstrap-social.css, просто добавив border-radius: 50%;

.btn-social-icon.btn-lg{height:45px;width:45px;
   padding-left:0;padding-right:0; border-radius: 50%; }

И вот HTML

<a >
   <i></i>
</a>
<a>
   <i></i>
</a>
<a>
   <i></i>
</a>

Для меня это работает гладко.

Поделиться

Ali Adravi

17 июня 2014 в 03:39

Используйте значки с удивительным набором шрифтов (альтернатива значкам начальной загрузки). Вот еще примеры: http://fontawesome.io/examples/

 .no-border {
        border: none;
        background-color: white;
        outline: none;
        cursor: pointer;
    }
.color-no-focus {
        color: grey;
    }
  .hover:hover {
        color: blue;
    }
 .white {
        color: white;
    }

<button type="button" (click)="doSomething()" 
class="hover color-no-focus no-border fa-stack fa-lg">
<i></i>
<span>1</span>
</button>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

Поделиться

Manish Jain

04 февраля 2017 в 01:38

Чтобы добавить закругленную границу в любую кнопку, лучше всего добавить свойство border-radius . Я считаю, что этот класс лучше, потому что вы можете добавить его при любом размере кнопки. Если вы зададите высоту и ширину, вам нужно будет создать класс «rouding» для каждого размера кнопки.

.btn-circle {
  border-radius: 50%;
}

<button>Click Me!</button>
<button>?</button>

Поделиться

Isabella Riquetti

15 октября 2019 в 17:57

W3.CSS Кнопки. Уроки для начинающих. W3Schools на русском

Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Отключено

Button
Кнопка
Кнопка
Кнопка
Кнопка
Тень
Кнопка

Кнопка1
Кнопка2
Кнопка3

Кнопка
Кнопка

W3.CSS Классы кнопки

W3.CSS предоставляет следующие классы для кнопок:

Класс	Определяет
w3-btn	Прямоугольная кнопка с эффектом тени при наведении. Цвет по умолчанию черный.
w3-button	Прямоугольная кнопка с серым эффектом наведения. Цвет по умолчанию светло-серый в W3.CSS версии 3. Цвет по умолчанию наследуется от родительского элемента в версии 4.
w3-bar	Горизонтальная полоса, которая может использоваться для группировки кнопок. (Идеально подходит для горизонтальных меню навигации)
w3-block	Класс, который можно использовать для определения кнопки на всю ширину (100%).
w3-circle	Может использоваться для определения круглой кнопки.
w3-ripple	Может быть использован для создания эффекта ряби.

Кнопки

И класс w3-button, и класс w3-btn добавляют поведение кнопки к любым элементам HTML.

Наиболее распространенные элементы для использования <input type=»button»>, <button> и <a>:

Пример

Button Button
Link Button

<input type=»button» value=»Input Button»>

<button>Button Button</button>

<a href=»https://www.w3schools.com»>Link Button</a>

Попробуйте сами »

Цвета кнопок

Black
Khaki
Yellow
Red
Purple
Aqua
Blue
Indigo
Green
Teal

Все классы w3-color используются для добавления цвета к кнопкам:

Пример

<button>Black</button>

<button>Khaki</button>

<button>Yellow</button>

<button>Red</button>

<button>Purple</button>

Попробуйте сами »

Цвета при наведении

Эффекты наведения также бывают разных цветов. Вот некоторые:

White
Red
Purple
Aqua
Blue
Green
Teal

Классы w3-hover-color используются для добавления цвета при наведении на кнопки:

Пример

<button>Black</button>

<button>Red</button>

<button>Purple</button>

Попробуйте сами »

Формы кнопок

Normal
Round
Rounder
and Rounder
and Rounder

Классы w3-round-size используются для добавления округленных границ к кнопкам:

Пример

Round
Rounder
and Rounder
and Rounder

<button>Round</button>

<button>Rounder</button>

<button>and Rounder</button>

<button>and Rounder</button>

Попробуйте сами »

Размеры кнопок

Tiny
Small
Medium
Large
XLarge

Классы w3-size могут быть использованы для определения различных размеров текста:

Пример

<button>Tiny</button>

<button>Small</button>

<button>Medium</button>

<button>Large</button>

<button>xLarge</button>

<button>XXLarge</button>

<button>XXXLarge</button>

<button>Jumbo</button>

Попробуйте сами »

Границы кнопок

Кнопка
Кнопка
Кнопка
Кнопка

Класс w3-border можно использовать для добавления границ к кнопкам.

Классы w3-border-color используются для определения цвета границы:

Пример

<button>Button</button>

<button>Button</button>

<button>Button</button>

<button>Button</button>

Попробуйте сами »

Совет: Добавьте класс w3-round-размер чтобы добавить скругленные границы.

Кнопки с различными текстовыми эффектами

Кнопки могут использовать эффект более широкого текста:

Обычный
Широкий

Класс w3-wide добавляет более широкий текстовый эффект:

Кнопки могут иметь курсивный и жирный текст:

Обычный
Курсивный
Жирный

Используйте стандартные HTML теги (<i> и <b>), чтобы добавить курсивный или полужирный эффект к тексту кнопки:

Пример

<button><i>Курсивный</i></button>

<button><b>Жирный</b></button>

Попробуйте сами »

Кнопки с отступом (padding)

Кнопка
Кнопка
Кнопка

Классы w3-padding-размер используются для добавления дополнительного отступа вокруг текста кнопки:

Пример

Кнопка
Кнопка
Кнопка

<button>Кнопка</button>

<button>Кнопка</button>

<button>Кнопка</button>

Попробуйте сами »

Кнопки полной ширины

Чтобы создать кнопку полной ширины, добавьте в неё класс w3-block.

Кнопки полной ширины имеют ширину 100% и охватывают всю ширину родительского элемента:

Кнопка

Пример

Кнопка
Кнопка
Кнопка

<button>Кнопка</button>

<button>Кнопка</button>

<button>Кнопка</button>

Попробуйте сами »

Совет: Выровняйте текст кнопки с помощью класса w3-left-align или w3-right-align.

Размер блока может быть определен с помощью style=»width:».

Кнопка
Кнопка
Кнопка

Пример

<button
>Button</button>

<button>Button</button>

<button>Button</button>

Попробуйте сами »

Отключенные кнопки

Кнопки выделяются эффектом тени, и стрелочка курсора превращается в руку при наведении на них курсора.

Отключенные кнопки непрозрачны (полупрозрачны) и отображают знак «no parking sign» («парковка запрещена»):

Кнопка
Отключено

Класс w3-disabled используется для создания отключенной (disabled) кнопки (если элемент поддерживает стандартный disabled атрибут HTML, вместо него можно использовать disabled атрибут):

Пример

Кнопка-ссылка
Кнопка

<a href=»https://www.w3schools.com»>Кнопка-ссылка</a>

<button disabled>Кнопка</button>

<input type=»button» value=»Button» disabled>

Попробуйте сами »

Кнопки-панели (бары)

Кнопки можно сгруппировать в горизонтальной полосе с помощью класса w3-bar:

Кнопка
Кнопка
Кнопка

Пример

<div>

<button>Кнопка</button>

<button>Кнопка</button>

<button>Кнопка</button>

</div>

Попробуйте сами »

Класс w3-bar появился в W3.CSS версии 2.93 / 2.94.

Кнопки могут быть сгруппированы без пробелов между ними с помощью класса w3-bar-item:

Кнопка
Кнопка
Кнопка

Пример

<div>

<button>Кнопка</button>

<button>Кнопка</button>

<button>Кнопка</button>

</div>

Попробуйте сами »

Панели кнопок можно центрировать с помощью класса w3-center:

Кнопка
Кнопка
Кнопка

Пример

<div>
<div>

<button>Кнопка</button>

<button>Кнопка</button>

<button>Кнопка</button>

</div>
</div>

Попробуйте сами »

Чтобы показать две (или более) панели кнопок в одной строке, добавьте класс w3-show-inline-block:

Кнопка
Кнопка
Кнопка

Пример

Кнопка
Кнопка
Кнопка

<div
>
<div>

<button>Кнопка</button>
<button
class=»w3-btn w3-teal»>Кнопка</button>
<button>Кнопка</button>
</div>
</div>

Попробуйте сами »

Навигационные панели (навбары)

Панели кнопок можно легко использовать в качестве панелей навигации:

Кнопка
Кнопка
Кнопка

Пример

<div>
<button>Кнопка</button>
<button>Кнопка</button>
<button>Кнопка</button>
</div>

Попробуйте сами »

Размер каждого элемента можно определить с помощью style=»width:»:

Кнопка
Кнопка
Кнопка

Пример

<div>
<button
style=»width:33.3%»>Кнопка</button>
<button>Кнопка</button>
<button
class=»w3-bar-item w3-button w3-red»>Кнопка</button>
</div>

Попробуйте сами »

Вы узнаете больше о навигации позже в этом учебнике.

Левая и правая кнопки

Используйте класс .w3-left и класс .w3-right чтобы перемещать кнопки влево или вправо:

Слева
Справа

Используется для создания кнопок «previous/next» (предыдущий/следующий):

« Previous
Next »

Пример

<div>

<button>Слева</button>

<button>Справа</button>
</div>

Попробуйте сами »

Кнопки с эффектами ряби

The w3-ripple создает эффект ряби (волны) для кнопок (при нажатии на них):

Кнопка
Кнопка
Кнопка

Пример

<button>Button</button>
<button
class=»w3-button w3-ripple w3-red»>Кнопка</button>
<button>Кнопка</button>

Попробуйте сами »

Все элементы могут быть кнопками

С помощью таблицы стилей W3.CSS все элементы можно сделать кнопкой:

Картинка может быть w3-button

Картинка может быть w3-btn

Любой div, header, footer или другие контейнеры могут быть w3-button!

Любой div, header, footer или другие контейнеры могут быть w3-btn!

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

Класс w3-circle можно использовать для создания круглых кнопок:

+
+

Квадратные кнопки:

+
+

Пожалуйста, включите JavaScript для просмотра комментариев, предоставленных Disqus.

Кнопки-переключатели при помощи CSS3

Новые свойства CSS (CSS3) дают невероятные возможности для творчества и полета фантазии. Мне особенно нравится проектирование и создание элементов пользовательского интерфейса, таких как кнопки, переключатели и тому подобное. В этой статье я покажу вам, как создать кнопку-переключатель при помощи только CSS, без единой строчки JavaScript.

Несколько замечаний, прежде чем начнем:

Я не буду добавлять префиксы браузеров в примеры CSS-кода, но вы можете найти их в исходных файлах.

Мы не будем использовать множество переходов между различными состояниями кнопок, потому что мы будем использовать псевдо-элементы для уменьшения количества html-элементов до минимума, а только Firefox поддерживает переходы/анимацию для псевдо-элементов.

Мы будем использовать «checkbox hack» (см. ниже).

Лично я использую бокс-модель где [width] = [element-width] + [padding] + [borders]. Я активировал её при помощи следующего кода:

*,
*:after,
*:before {
box-sizing: border-box;
}

О «Checkbox Hack»

Сheckbox hack позволяет нам иметь обработчик переключателя на чистом CSS. Он основывается на чекбоксе (который либо отмечен, либо неотмечен), псевдо-селекторе :checked, и родственном селекторе (~ или +). Если вкратце, то его можно описать так: «если чекбокс отмечен, то следующий элемент X ведет себя определенным заранее образом».

Раньше для таких целей использовали чекбокс с ID и тегом label, c атрибутом «for«, ссылающимся на ID чекбокса. Этот метод позволял скрыть чекбокс и переключать его, нажав на label. Единственная проблема с этим подходом это то, что мобильный Safari не поддерживает его.

Поэтому мы будем использовать другой способ: делаем чекбокс невидимым, устанавливаем его выше других элементов (z-index:100), в нашем случае выше label, и затем когда вы кликаете на тег label, то на самом деле вы отмечаете чекбокс! Код выглядит следующим образом:

.switch input {
/* Вначале делаем его равным размеру контейнера, в котором он находится */
position: absolute;
width: 100%;
height: 100%;
/* Затем, перемещаем его вверх, относительно других элементов */
z-index: 100;
/* Делаем его невидимым */
opacity: 0;
/* А это для эргономичности */
cursor: pointer;
}

Эти 12 строк CSS-кода будут использоваться во всех последующих примерах, без изменений.

Пример 1

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

Разметка

Элемент .switch — это наш контейнер. Внутри этого элемента находится тег input и тег label. Для тега input достаточно указать только тип checkbox (ID, name не нужны).

Последний элемент может быть каким угодно (ссылкой, div-ом, span-ом, label и т.д.). Я использую label по старой привычке, потому что раньше использовал старый хак для чекбоксов, для которого необходим был тег label.

CSS

Во-первых, мы зададим нашей кнопке размер, установив ширину и высоту контейнера. Убедитесь, что ширина и высота равны, иначе ваша кнопка не будет круглой. Помните, что мы прячем чекбокс при помощи CSS-кода, приведенного в начале этой статьи.

.switch {
width: 100px;
height: 100px;
position: relative;
}

Затем зададим стили для тега label. Прежде всего, установим его размеры равные размерам его родителя (контейнер). Затем, зададим ему относительное позиционирование для того, чтобы добавить позже некоторые псевдо-элементы.

.switch label {
display: block;
width: 100%;
height: 100%;
position: relative;
border-radius: 50%;
background: #eaeaea;
box-shadow:
0 3px 5px rgba(0,0,0,0.25),
inset 0 1px 0 rgba(255,255,255,0.3),
inset 0 -5px 5px rgba(100,100,100,0.1),
inset 0 5px 5px rgba(255,255,255,0.3);
}

Затем, при помощи псевдо-элемента :after добавим кнопке реалистичности, нарисуем круглую рамку, добавим градиент и тени.

.switch label:after {
content: «»;
position: absolute;
z-index: -1;
top: -8%;
right: -8%;
bottom: -8%;
left: -8%;
border-radius: inherit;
background: #ddd; /* Fallback */
background: linear-gradient(#ccc, #fff);
box-shadow:
inset 0 2px 1px rgba(0,0,0,0.15),
0 2px 5px rgba(200,200,200,0.1);
}

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

.switch label:before {
content: «»;
position: absolute;
width: 20%;
height: 20%;
left: 40%;
top: 40%;
border-radius: inherit;
background: #969696; /* Fallback */
background: radial-gradient(40% 35%, #ccc, #969696 60%);
box-shadow:
inset 0 2px 4px 1px rgba(0,0,0,0.3),
0 1px 0 rgba(255,255,255,1),
inset 0 1px 0 white;
}

Итак, теперь у нас есть симпатичная кнопка. Давайте разбираться с отмеченным состоянием кнопки. Когда вы нажимаете на контейнер, вы на самом деле нажимаете на невидимый чекбокс, который находится над тегом label. Если вы отметили чекбокс, это означает, что вы можете использовать селектор :checked и родственный селектор.

Таким образом, когда кнопка включена, мы изменим цвет фона индикатора (псевдо-элемент :before), а также фон кнопки.

.switch input:checked ~ label { /* Button */
background: #e5e5e5; /* Fallback */
background: linear-gradient(#dedede, #fdfdfd);
}

.switch input:checked ~ label:before { /* LED */
background: #25d025; /* Fallback */
background: radial-gradient(40% 35%, #5aef5a, #25d025 60%);
box-shadow:
inset 0 3px 5px 1px rgba(0,0,0,0.1),
0 1px 0 rgba(255,255,255,0.4),
0 0 10px 2px rgba(0, 210, 0, 0.5);
}

Пример 2

В этом примере мы сделаем переключатель, похожий на те, которые используются в каждом доме для включения\выключения света.

Разметка

Разметка такая же, как и в первом примере: контейнер, чекбокс и этикетка:

CSS

Начнем с установки размера нашей кнопки.

.switch {
width: 50px;
height: 100px;
position: relative;
}

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

.switch label {
display: block;
width: 100%;
height: 100%;
position: relative;
background: #cbc7bc;
border-radius: 5px;
box-shadow:
inset 0 1px 0 white,
0 0 0 1px #999,
0 0 5px 1px rgba(0,0,0,0.2),
0 2px 0 rgba(255,255,255,0.6),
inset 0 10px 1px #e5e5e5,
inset 0 11px 0 rgba(255,255,255,0.5),
inset 0 -45px 3px #ddd;
}

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

.switch label:after {
content: «»;
position: absolute;
z-index: -1;
top: -20px;
left: -25px;
bottom: -20px;
right: -25px;
background: #ccc; /* Fallback */
background: linear-gradient(#ddd, #bbb);
border-radius: inherit;
border: 1px solid #bbb;
box-shadow:
0 0 5px 1px rgba(0,0,0,0.15),
0 3px 3px rgba(0,0,0,0.3),
inset 0 1px 0 rgba(255,255,255,0.5);
}

Второй более интересен, так как у нас есть только один элемент для создания двух состояний. Используем для этого box-shadow!

.switch label:before {
content: «»;
position: absolute;
width: 8px;
height: 8px;
top: -13px;
left: 20px;
background: #666;
border-radius: 50%;
box-shadow:
0 1px 0 white, /* Subtle reflection on the bottom of the hole */
0 120px 0 #666, /* Faking a second screw hole… */
0 121px 0 white; /* And its reflection */
}

В этом примере только центральная часть (которая является тегом label) будет изменяться, когда мы щелкнем по кнопке. И мы создали этот эффект при помощи box-shadow:

.switch input:checked ~ label { /* Button */
background: #d2cbc3;
box-shadow:
inset 0 1px 0 white,
0 0 0 1px #999,
0 0 5px 1px rgba(0,0,0,0.2),
inset 0 -10px 0 #aaa,
0 2px 0 rgba(255,255,255,0.1),
inset 0 45px 3px #e0e0E0,
0 8px 6px rgba(0,0,0,0.18);
}

Пример 3

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

Разметка

Для этого переключателя, нам нужен будет дополнительный элемент. Используем для этой цели тег <i>.

CSS

Итак, еще раз, мы скрываем чекбокс и задаем размеры для контейнера.

.switch {
width: 180px;
height: 50px;
position: relative;
}

Затем мы собираемся сделать следующее: label будет контейнером для переключателя. А тег <i> и будет фактически переключателем. Поэтому тег label будет иметь только серый фон с тенями, не более того. Псевдо-элементы сделают все остальное.

.switch label {
display: block;
width: 100%;
height: 100%;
position: relative;
background: #a5a39d;
border-radius: 40px;
box-shadow:
inset 0 3px 8px 1px rgba(0,0,0,0.2),
0 1px 0 rgba(255,255,255,0.5);
}

Это «рамка контейнера», поэтому мы задаем ей приятный градиент и некоторые тени для блока.

.switch label:after {
content: «»;
position: absolute;
z-index: -1;
top: -8px; right: -8px; bottom: -8px; left: -8px;
border-radius: inherit;
background: #ccc; /* Fallback */
background: linear-gradient(#f2f2f2, #ababab);
box-shadow: 0 0 10px rgba(0,0,0,0.3),
0 1px 1px rgba(0,0,0,0.25);
}

Этот псевдо-элемент предназначен для создания мягкого углубления вокруг кнопки, для этого мы будем использовать градиент и тени. Небольшое улучшение для Chrome с помощью фильтра blur, чтобы сделать эффект еще мягче.

.switch label:before {
content: «»;
position: absolute;
z-index: -1;
top: -18px; right: -18px; bottom: -18px; left: -18px;
border-radius: inherit;
background: #eee; /* Fallback */
background: linear-gradient(#e5e7e6, #eee);
box-shadow: 0 1px 0 rgba(255,255,255,0.5);
-webkit-filter: blur(1px); /* Smooth trick */
filter: blur(1px); /* Future-proof */
}

Итак, теперь у нас есть очень красивая рамка для наших переключателей. Теперь перейдем к самим переключателям.

Сделаем его блочным элементом, зададим ему высоту его родителя и немного больше чем половину ширины родителя. Мы поместим его слева от контейнера, и зададим ему некоторые стили (тени и градиенты):

.switch label i {
display: block;
height: 100%;
width: 60%;
position: absolute;
left: 0;
top: 0;
z-index: 2;
border-radius: inherit;
background: #b2ac9e; /* Fallback */
background: linear-gradient(#f7f2f6, #b2ac9e);
box-shadow:
inset 0 1px 0 white,
0 0 8px rgba(0,0,0,0.3),
0 5px 5px rgba(0,0,0,0.2);
}

Этот первый псевдо-элемент используется для улучшения эстетики: он добавляет симпатичный эффект переключения.

.switch label i:after {
content: «»;
position: absolute;
left: 15%;
top: 25%;
width: 70%;
height: 50%;
background: #d2cbc3; /* Fallback */
background: linear-gradient(#cbc7bc, #d2cbc3);
border-radius: inherit;
}

Вторым псевдо-элементом является слово «ON» или «OFF», в зависимости от состояния кнопки. Мы используем свойство content, чтобы установить нужное слово, и некоторые стили для шрифтов, чтобы она выглядела, как будто она выгравирована на фоне:

.switch label i:before {
content: «off»;
position: absolute;
top: 50%;
right: -50%;
margin-top: -12px;
color: #666; /* Fallback */
color: rgba(0,0,0,0.4);
font-style: normal;
font-weight: bold;
font-family: Helvetica, Arial, sans-serif;
font-size: 24px;
text-transform: uppercase;
text-shadow: 0 1px 0 #bcb8ae, 0 -1px 0 #97958e;
}

Теперь у нас есть тумблер, который выглядит точно также как нарисовал Piotr, верно?

Теперь займемся состоянием кнопки, когда она «включена». Три вещи будут изменяться когда мы нажмем на флажок: цвет фона, переключение позиции, и слово («ON» или «OFF»):

.switch input:checked ~ label { /* Background */
background: #9abb82;
}

.switch input:checked ~ label i { /* Toggle */
left: auto;
right: -1%;
}

.switch input:checked ~ label i:before { /* On/off */
content: «on»;
right: 115%;
color: #82a06a;
text-shadow: 0 1px 0 #afcb9b, 0 -1px 0 #6b8659;
}

Пример 4

Наш последний пример основан на другой работе от Piotr Kwiatkowski, но немного отредактированной мною, чтобы иметь те же цвета, что и другие примеры.

Разметка

Разметка будет почти такой же, как в третьем примере. Класс для тега <i> нужен для того, чтобы использовать FontAwesome.

CSS

Я не буду описывать здесь все возможности FontAwesome, потому что я уверен, что многие уже работали с ним. Просто убедитесь, что

в вашем @font-face указан правильный путь к файлам,

один из ваших CSS-файлов включает в себя стили FontAwesome.

Итак, давайте начнем с основ: спрячем чекбокс и установим размеры контейнера:

.switch {
width: 150px;
height: 150px;
position: relative;
}

Теперь, давайте позаботимся о этикетке, которая и будет нашей большой кнопкой. Обратите внимание, что мы включаем сюда некоторые стили для шрифтов. Поскольку все они наследуются, они будут применены к тегу <i> (значок).

.switch label {
display: block;
width: 100%;
height: 100%;
position: relative;
color: #a5a39d;
font-size: 70px;
text-align: center;
line-height: 115px;
text-shadow: 0 2px 1px rgba(0,0,0,0.25);
border-radius: 50%;
background: #b25244; /* Fallback */
background: linear-gradient(#f7f2f6, #b2ac9e);
transition: all 0.3s ease-out;
z-index: -1;
box-shadow:
inset 0 2px 3px rgba(255,255,255,0.13),
0 5px 8px rgba(0,0,0,0.3),
0 10px 10px 4px rgba(0,0,0,0.3);
}

Оба псевдо-элемента для этикетки используются для создания симпатичного эффекта вокруг кнопки. Мы применяем фильтр размытия для :before, чтобы сделать его немного более тонким.

.switch label:before {
content: «»;
position: absolute;
left: -10px;
right: -10px;
top: -10px;
bottom: -10px;
z-index: -1;
border-radius: inherit;
box-shadow: inset 0 10px 10px rgba(0,0,0,0.13);
-webkit-filter:blur(1px); /* Smooth trick */
filter: blur(1px); /* Future-proof */
}

.switch label:after {
content: «»;
position: absolute;
left: -20px;
right: -20px;
top: -20px;
bottom: -20px;
z-index: -2;
border-radius: inherit;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.1),
0 1px 2px rgba(0,0,0,0.3),
0 0 10px rgba(0,0,0,0.15);
}

Теперь разберемся с нашими дополнительным элементом: <i>. FontAwesome использует :before псевдо-элемент, чтобы показать иконку, поэтому мы не можем его использовать. Но мы можем использовать :after, и мы так и поступим, потому что мы должны что-то сделать с верхней частью нашей кнопки.
Как обычно, мы зададим ей симпатичный градиент, тонкие тени с 1px размытия, чтобы сделать ее более гладкой.

.switch .icon-off:after {
content: «»;
display: block;
position: absolute;
width: 70%;
height: 70%;
left: 50%;
top: 50%;
z-index: -1;
margin: -35% 0 0 -35%;
border-radius: 50%;
background: #d2cbc3; /* Fallback */
background: linear-gradient(#cbc7bc, #d2cbc3);
box-shadow:
0 -2px 5px rgba(255,255,255,0.05),
0 2px 5px rgba(255,255,255,0.1);
-webkit-filter:blur(1px); /* Smooth trick */
filter: blur(1px); /* Future-proof */
}

Теперь стили для отмеченного состояния: значок становится зеленым, а кнопка выглядит нажатой:

.switch input:checked ~ label { /* Button */
color: #9abb82;
box-shadow:
inset 0 2px 3px rgba(255,255,255,0.13),
0 5px 8px rgba(0,0,0,0.35),
0 3px 10px 4px rgba(0,0,0,0.2);
}

Спасибо за внимание, надеюсь вам понравилось

Демонстрация

Скачать исходные файлы

Перевод статьи с http://tympanus.net

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

Стили CSS кнопок, CSS кнопки

Здравствуйте, в этой публикации представлены четыре круглые кнопки, выполненные на CSS и HTML, без использования картинок и фотошопа. Если пофантазировать, то можно найти применение этим кнопкам. Я решил опубликовать и показать вам их, потому — что мне самому они очень понравились. Смотрятся, конечно эти CSS кнопки довольно — таки эффективно и привлекательно.

Смотреть пример

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

HTML код кнопок

Синяя кнопка :

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

Красная кнопка :

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

Зеленая кнопка :

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

Желтая кнопка :

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

Стили CSS кнопок

Синяя кнопка :

.btn-blue {
background: #108FE8;
border: 3px solid #fff;
border-radius: 100%;
box-shadow: 0 -2px 0 3px #0d72b8 inset, 0 5px 5px rgba(3, 25, 41, 0.17), 0 15px rgba(255, 255, 255, 0.25) inset;
cursor: pointer;
display: inline-block;
height: 75px;
width: 75px;
}
.btn-blue:hover {
background: #333;
box-shadow: 0 -2px 0 3px #1a1a1a inset, 0 5px 5px rgba(0, 0, 0, 0.17), 0 15px rgba(255, 255, 255, 0.32) inset;
}

Красная кнопка :

.btn-red {
background: #E53030;
border: 3px solid #fff;
border-radius: 100%;
box-shadow: 0 -2px 0 3px #c91919 inset, 0 5px 5px rgba(65, 8, 8, 0.17), 0 15px rgba(255, 255, 255, 0.25) inset;
cursor: pointer;
display: inline-block;
height: 75px;
width: 75px;
}
.btn-red:hover {
background: #333;
box-shadow: 0 -2px 0 3px #1a1a1a inset, 0 5px 5px rgba(0, 0, 0, 0.17), 0 15px rgba(255, 255, 255, 0.32) inset;
}

Зеленая кнопка :

.btn-green {
background: #0EC518;
border: 3px solid #fff;
border-radius: 100%;
box-shadow: 0 -2px 0 3px #0b9512 inset, 0 5px 5px rgba(0, 7, 1, 0.17), 0 15px rgba(255, 255, 255, 0.25) inset;
cursor: pointer;
display: inline-block;
height: 75px;
width: 75px;
}
.btn-green:hover {
background: #333;
box-shadow: 0 -2px 0 3px #1a1a1a inset, 0 5px 5px rgba(0, 0, 0, 0.17), 0 15px rgba(255, 255, 255, 0.32) inset;
}

Желтая кнопка :

.btn-yellow {
background: #FFC334;
border: 3px solid #fff;
border-radius: 100%;
box-shadow: 0 -2px 0 3px #ffb401 inset, 0 5px 5px rgba(103, 73, 0, 0.17), 0 15px rgba(255, 255, 255, 0.25) inset;
cursor: pointer;
display: inline-block;
height: 75px;
width: 75px;
}
.btn-yellow:hover {
background: #333;
box-shadow: 0 -2px 0 3px #1a1a1a inset, 0 5px 5px rgba(0, 0, 0, 0.17), 0 15px rgba(255, 255, 255, 0.32) inset;
}

— Для тех, кто не знает как поставить эти круглые кнопки CSS, небольшой инструктаж:

Копируйте нужные стили CSS кнопок и добавляйте их в самое окончание файла style.css своей темы. И потом, перед публикацией записи останется только добавить HTML код кнопки, естественно вставив свою ссылку вместо знака #, в любое место будующей статьи.

Лучший способ отблагодарить автора

Как сделать красивую кнопку для сайта? Примеры готовых кнопок на HTML+CSS.

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

Пользуйтесь на здоровье.

Добавляйте в закладки.

Красивые готовые HTML+CSS кнопки для сайта

CSS3 анимированные кнопки-иконки

Демо
Подробнее

«Бизнес ПРО» кнопки и элементы на CSS3

Демо
Подробнее

Социальные кнопки

Демо
Подробнее

Простые 3Д кнопки-метки

Демо
Скачать
Подробнее

HTML CSS Кнопки

Скачать

Светящиеся кнопки

Демо
Скачать
Подробнее

Облако тегов с CSS-подсветкой

Демо
Скачать
Подробнее

Круглые социальные кнопки

Демо
Скачать
Подробнее

CSS — кнопки социальных сетей

Демо
Скачать
Инструкция

Милые CSS кнопки

Демо
Скачать
Подробнее

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

Демо
Скачать
Подробнее

3Д кнопки социальных медиа

Демо
Скачать
Подробнее

Офигенные CSS3 кнопки

Демо
Скачать
Подробнее

CSS3 кнопки «Гитхаб»

Демо
Скачать

Кнопки-переключатели

Демо
Скачать
Документация

Кнопки на CSS3 с псевдо-элементами

Демо
Скачать
Документация

3Д веб-кнопки

Демо
Скачать
Документация

Анимированные кнопки

Демо
Скачать
Документация

Радио-кнопки с тенью

Интересная попытка прибавить кнопкам в стиле «flat» немного глубины.

Скачать

Простые кнопки со стрелами

Скачать

Кнопки оформленные в виде списка

Скачать

Мокап пользовательского интерфейса с кнопками

Скачать

Анимированные кнопки с иконками

Скачать

Кнопки

Скачать

Интересные идеи с необычной стилистикой кнопок

Скачать

Кнопки в стиле «Флэт»

Скачать

Flat-кнопки

Скачать

Больше flat-кнопок на HTML+CSS для пользовательского интерфейса

Скачать

Кнопки с интересным hover-эффектом

Скачать

Кнопки «как у Гугла»

Скачать

Раскрашиваемые кнопки «Добавить в корзину»

Скачать

CSS3 кнопки с иконками

Скачать

Металлические кнопки для интерфейса

Скачать

Стильные кнопки-переключатели

Скачать

Анимированные лайк-кнопки

Скачать

Анимированные иконочные кнопки

Скачать

Радио-баттоны

Скачать

Кнопки для выбора и чеклиста

Скачать

Интерфейсные кнопки в стиле «флэт»

Скачать

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

Скачать

Красивые цветные кнопки на CSS для сайта

Скачать

Готовые анимированные кнопки на сайт

Скачать

Кнопки социальных сетей для сайта

Демо
Скачать

Готовые кнопки

Скачать

Кнопки в стиле «Герои 2»

Скачать

Toggle-кнопки

Скачать

Анимированная кнопка «Скачать» для сайта

Скачать

Кнопка-компас

Скачать

Набор простых и красивых кнопок для сайта

Скачать

Кнопка-переключатель

Скачать

Кнопки в стиле Стар-трека

Скачать

CSS3 «Hexagon» Кнопки

Демо
Документания

Как создать кнопки для сайта на CSS+HTML с эффектами и анимацией?

Цветные CSS-кнопки для сайта

Набор из нескольких типов CSS кнопок в разных цветах.

Скачать

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

Коллекция кнопок для украшения сайта.

Скачать

Кнопки-переключатели

Переключатели в стиле Бутрстрапа

Скачать

Набор светлых кнопок

Несколько простых и минималистичных кнопок для вашего интерфейса

Скачать

SCSS кнопки

Используют иконки FontAwesome

Скачать

Кнопки Салливана

Простые и чистые кнопки сделанные на CSS, Используются иконки из FontAwesome.

Скачать

8-битные кнопки

Оцените эти прекрасные восьмибитные кнопки при наведении.

Скачать

3Д кнопки

Скачать

Стеклянные кнопки

В наборе стеклянных кнопок используются различные CSS-настройки для придания 3Д-вида.

Скачать

CSS3 «Вкл.»/«Выкл.» переключатели

Прикольные переключатели выполненные на HTML и CSS3. Используется немного jQuery.

Скачать

Анимированная полоса загрузки

Скачать

Кнопка с выпадающей карточкой

Эти кнопки выглядят как карточки, выпадающие из кармашков. Используется для того чтобы скрыть информацию до того как пользователь выберет карточку.

Скачать

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

Чистые мягкие кнопки.

Скачать

Кнопки

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

Скачать

Прошитые кнопки для сайта о рукоделии

Кнопки выглядят простроченными и демонстрируют возможности CSS.

Скачать

Кнопки для меню администратора на сайте

Скачать

Кнопка-переключатель (слайдер) для сайта

Скачать

Кнопка в виде покерной фишки

Может также использоваться с различными эффектами при наведении на нее.

Скачать

Простые CSS кнопки для сайта

Набор простых кнопок легко настроить под себя и использовать. Может быть легко интегрирован с Font-Awesome.

Скачать

Социальные кнопки для сайта

Скачать

Простые кнопки

Скачать

Большая кнопка

Большая массивная светящаяся кнопка с эффектом тени.

Скачать

Восхитительные социальные кнопки для сайта на Css3

Используются градиенты и 3д-тень.

Скачать

3Д кнопки «Скачать» для сайта

Скачать

Простые и красивые пуш-кнопки для сайта

Скачать

Социальные кнопки для сайта

В кнопках используется простые настройки CSS — градиенты, тени, изменение цвета при наведении курсора.

Скачать

Готовые скругленные кнопки

Другая коллекция красивых закругленных анимированных кнопок на сайт.

Скачать

Кнопки для сайта с «металлическим» интерфейсом

Скачать

3Д анимированные кнопки

Скачать

Красивые «мягкие» кнопки на сайт

В кнопках используются символы юникода, но вы можете добавить иконки или иконочный шрифт.

Скачать

Готовые красивые кнопки

Круглые, немного светящиеся кнопки на сайт.

Скачать

Рождественские кнопки на сайт

Скачать

Красивые кнопки «поделиться в социальных сетях»

Скачать

Прекрасные плоские кнопки

Коллекция красивых плоских кнопок на любые случаи. Нет анимаций и эффектов.

Скачать

Красивые кнопки-переключатели

Скачать

Темные кнопки-кружки

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

Скачать

Брендовые кнопки на сайт

Без эффектов или анимаций, просто HTML&CSS кнопки брендов на ваш сайт.

Скачать

3Д-кнопки с эффектом переворота

Используется только CSS3.

Скачать

CSS3-переключатели

Скачать

3D CSS3 кнопки

Скачать

Подсвечивающиеся кнопки

Отлично! Теперь вы умеете делать кнопки с подсветкой на чистом CSS, без использования фотошопа.

Скачать

CSS3 кнопки с крутыми эффектами

Скачать

CSS3 анимированные кнопки

Скачать

CSS3 toggle-кнопки

Скачать

Красивые минималистичные круглые кнопки на сайт

Скачать

Готовые круглые анимированные кнопки

Скачать

Кнопки с анимацией

Скачать

Социальные кнопки с 3D-эффектом

Скачать

Коллекция красивых 3D-кнопок

Скачать

Красивая розовая кнопка с анимационным эффектом

Скачать

Как самому сгенерировать кнопку для сайта?

Идем на Sanwebe CSS3 button generator. Что там? Генератор кнопок, вот такой:

Видим там миллион настроек и пробуем настраивать. Вот что получилось у меня.

Говорить тут нечего, это явно шедевр. Попробуйте и вы.

Как самому сделать кнопку для сайта (картинкой)?

Всегда можно позаимствовать чужую кнопку. Сто раз так делал. Например, ни одна HTML-кнопка из списка выше вам не нравится и вы думаете «пойду снова гуглить в Яндексе».

Идете вы на сайт Яндекса, где поисковик предлагает сделать yandex.ru главной страницей. Вот так:

Вас осеняет — эта божественная желтая кнопка ровно то, что вам нужно. Вот только надпись не та. На кнопке написано «Да», а вам нужно — «Скачать». Не проблема, открываем инспектор Хрома (Ф12) — меняем в коде «Да» на «Скачать».

Результат:

Отлично! То что нужно. Теперь идем в Фотошоп (или можете воспользоваться другими программами), выделяем кнопку и обрезаем ее по краю. В моей версии на английском языке это действие называется «Кроп»:

Результат:

Отличная кнопка картинкой, как по мне! И внешний вид интересный.

Ну хорошо, а что на счет HTML-CSS версии этой кнопки? Здесь тоже ничего сложного. Достаточно всего лишь… Скопировать CSS-оформление из инспектора Хрома. Кнопка ниже оформлена при помощи CSS:

Скачать

Примерно так можно сделать себе кнопку на сайт. Ну а как вставить в html картинку я уже рассказывал. Спасибо за внимание.

Material Design Lite. Button

Рассмотрим использование кнопок в MDL.

Кнопки реализованы на основе стандартного html-элемента button. Может содержать текст или изображение.

Доступны несколько видов кнопки: плоская (по умолчанию), поднимающая, FAB двух размеров и кнопка-значок. Все кнопки могут быть простыми (светло-серые) и цветными, а также быть в недоступном состоянии.

Классы кнопок.

mdl-button — обязательный класс для кнопки
mdl-js-button — обязательный класс для кнопки
mdl-button—raised — выпуклый эффект. Используется для fab, mini-fab, icon
mdl-button—fab — Круглая кнопка FAB. Используется для fab, mini-fab, icon
mdl-button—mini-fab — Маленькая круглая FAB. Используется для fab, mini-fab, icon
mdl-button—icon — Круглая кнопка-значок.
mdl-button—colored — Цветная кнопка (primary или accent color, в зависимости от типа кнопки). Цвета определены в material.min.css
mdl-button—primary — Цвет primary. Цвета определены в material.min.css
mdl-button—accent — Цвет accent. Цвета определены в material.min.css
mdl-js-ripple-effect — эффект ripple. Можно комбинировать с другими классами

Подключаем к элементу button один или несколько классов.


<button>Кнопка стандартная</button>

Примеры

FAB-кнопка с эффектом ripple (простая и цветная)

add
add

Мини-FAB

add

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

add

Цветные выпуклые кнопки (стандарт и акцентированный)

add

Плоские кнопки (Стандарт, ripple, disabled

add

А также со цветами Prmary и Accent

add

Кнопка-значок (круглая) — обычная и цветная

add

Вернуться на общую страницу Material Design Lite

Создание закругленных кнопок для сайтов | HTML и CSS

Сергей Минкин
в рубрику HTML и CSS

16 июля 2008
15
3.4 из 5
Создание закругленных кнопок для сайтов
При создании дизайна постоянно сталкиваешься с необходимостью создания стилизованных под конкретный дизайн кнопок для сайта, а рисовать постоянно картинки не удобно, да и не практично.
Здесь представлены 9 отличных статей на тему создания кнопок с изменяемой шириной.
Создание круглых ссылок-кнопок с помощью CSS
Минус этого метода в наличии большого количества span-ов и наличие двух графических файлов для создания фона. К плюсам можно отнести появляющуюся рамочку вокруг кнопки при наведении мышкой и возможность изменения высоты кнопки.
Владимир Токмаков: Рамки, тени, кнопки, плашки
К минусам пожалуй относится достаточно сложная релизация данного способа. К плюсам конечно то, что здесь используется PNG с уже исправленым багом в IE. Статья на русском.
Создание и оформление кнопок с изменяемыми размерами
Минус: тег button не всегда удобен для использования. Плюс: эффект нажатия.
Круглые уголки, интересные варианты
Минус: слишком большое количество тегов i при реализации. Плюс: Плюс: всего один файл для создания оформления, не зависит от размерашрифта, быстрое создание нового скина, не зависит от фона на которомлежит, при отключенных картинках белая ссылка будет на нужном фоне (вданном случае оранжевом). Статья на русском.
Создание кнопок сайта с простым CSS и HTML
Минус: простота оформления. Плюсы: не зависит от размера шрифта, всего один файл для создания кнопок и ее оформления и очень простая реализация.
CSS овальные кнопки сайта
Минус: наличие div`а при реализации, два файла картинок.
Простые круглые кнопки сайта с помощью CSS (Wii Buttons)
Плюсs: всего один файл для создания кнопки и ее оформления, очень простая реализация, достаточно красивое оформление.
Оформление кнопки сайта с помощью «раздвижных дверей»
Минусы: два файла картинок, проблемы с эффектом нажатия кнопки. Плюсы: красивое оформление.
Создание красивых кнопок сайта с помощью CSS
В минусах этого метода так же наличие двух картинок для фонов. Плюс: очень простая реализация.
Автор: Сергей Минкин
Занимается разработкой логотипов, фирменных стилей, дизайна приложений и сайтов. www.sergeyminkin.ru.
Расскажите друзьям
Оцените статью:
Как создать кнопку с закругленными углами с помощью CSS
В CSS3 вы можете придать элементам закругленные углы с помощью свойства border-radius. Давайте посмотрим на это на примере.
Предположим, у вас есть следующая разметка.

Чтобы сделать div видимым, мы установим его ширину и высоту, а также зададим ему красный цвет фона.
.red_div { цвет фона: красный; ширина: 200 пикселей; высота: 100 пикселей; }
Ниже приводится результат вышеуказанного.
Чтобы сделать границы блока закругленными, вы можете добавить следующий стиль:
Вышеуказанное устанавливает радиус 15 пикселей в верхнем левом, верхнем правом, нижнем левом и нижнем правом углах элемента. Чем выше значение радиуса, тем более скругленным становится край.
Ниже вы можете увидеть результат указанной выше разметки.
Свойство border-radius можно записать несколькими способами.
Указание одного значения для свойства установит для всех четырех краев элемента радиус этого значения.
радиус границы: 15 пикселей 15 пикселей;
С двумя значениями первое будет применяться к верхнему левому и нижнему правому углу, а второе — к верхнему правому и нижнему левому углам
радиус границы: 15px 15px 15px;
При трех значениях первое будет использоваться для верхнего левого угла, второе значение для верхнего правого и нижнего левого углов, а третье значение будет применено к нижнему правому углу.
радиус границы: 15px 15px 15px 15px;
Вышеуказанное явно устанавливает значение для каждого края.Вышеупомянутое является сокращением для приведенного ниже CSS, который также явно дает значение для каждого края.
граница-верх-левый-радиус: 15 пикселей; граница-верх-правый-радиус: 15 пикселей; граница-нижний-правый-радиус: 15 пикселей; граница-нижний-левый-радиус: 15 пикселей;
В рассмотренном нами примере мы установили одинаковое значение для всех краев. Вы, конечно, можете установить разные значения для каждого ребра, если хотите.
Добавление закругленных углов к кнопкам
border-radius можно использовать и для других элементов.Ниже мы видим, что он используется для добавления закругленных углов к кнопке.
кнопка { ширина: 200 пикселей; высота: 100 пикселей; радиус границы: 20 пикселей; }
Кнопка будет выглядеть так:
Вот еще несколько примеров готовых кнопок
ion-button: Ionic Framework API Docs
Кнопки представляют собой интерактивный элемент, который можно использовать в формах или в любом месте, где требуются простые стандартные функции кнопок. Они могут отображать текст, значки или и то, и другое.Кнопкам можно присвоить несколько атрибутов, чтобы они выглядели определенным образом.
Этот атрибут позволяет указать ширину кнопки. По умолчанию кнопки являются встроенными блоками, но установка этого атрибута изменит кнопку на элемент блока полной ширины.
Значение Детали
блок Кнопка на всю ширину с закругленными углами.
полный Кнопка во всю ширину с квадратными углами и без рамки слева или справа.
Этот атрибут определяет цвет фона и границы кнопки. По умолчанию кнопки имеют сплошной фон, если только кнопка не находится внутри панели инструментов, и в этом случае у нее прозрачный фон.
Значение Детали
прозрачный Кнопка с прозрачным фоном, напоминающим плоскую кнопку.
контур Кнопка с прозрачным фоном и видимой рамкой.
цельный Кнопка с закрашенным фоном. Полезно для кнопок на панели инструментов.
Этот атрибут определяет размер кнопки. Установка этого атрибута изменит высоту и отступ кнопки.
Значение Детали
малый Пуговица с меньшей высотой и набивкой. По умолчанию для кнопок в элементе.
по умолчанию Кнопка с высотой и отступом по умолчанию.Полезно для кнопок в элементе.
большой Пуговица с увеличенной высотой и набивкой.
Кнопки электронной почты: 5 способов сделать их пуленепробиваемыми и красивыми
Если ваша веб-страница — это ваш магазин, а ваша электронная почта — это витрина вашего магазина, то ваша кнопка с призывом к действию (CTA) — это потрясающая витрина, привлекающая людей. Или что-то в этом роде. Моя метафора, возможно, здесь развалилась.
Излишне говорить, что ваш CTA — одна из самых важных частей вашего электронного письма.И если его трудно найти, сложно использовать или каким-либо образом сломать, ваши подписчики сбегут. (Беги!)
Но не волнуйтесь. Мы здесь, чтобы убедиться, что ваша кнопка CTA — это не кровожадный кролик, отгоняющий ваших подписчиков. В этом сообщении блога мы подробнее рассмотрим методы создания кнопок, чтобы убедиться, что они надежны для ваших подписчиков.
Приготовьтесь учиться:
Что такое пуленепробиваемая кнопка?
Пуленепробиваемые кнопки
— это кнопки с призывом к действию, созданные с использованием кода вместо изображений.Вы можете надежно поменять свои GIF, PNG и JPEG на HTML и CSS. При использовании только кода кнопка будет отображаться во всех почтовых клиентах даже с отключенными изображениями, что делает их «пуленепробиваемыми».
Более того, вы можете обновить содержимое и стиль кнопок, просто отредактировав HTML-шаблон. Вам больше не нужно тратить время на создание кнопок в таком средстве дизайна, как Photoshop, загрузку их на сервер и обновление HTML.
Не использовать изображения
Я скажу это один раз и больше никогда не скажу.Единственная действительно пуленепробиваемая кнопка — это изображение.
* вздох *
Я знаю. Но это действительно единственный способ гарантировать, что ваша кнопка будет выглядеть точно так же в 100% почтовых клиентов. Потому что все мы знаем, насколько непоследовательно наши электронные письма могут выглядеть в разных почтовых клиентах, приложениях и устройствах.
Несмотря на это, вы никогда не должны использовать кнопку с изображением. Кнопки с изображениями теряются, когда изображения отключены из-за блокировки изображений, и они недоступны для ваших подписчиков, которые используют программы чтения с экрана (подробнее об этом через секунду).
Кнопка изображения теряет эффект, когда изображения отключены.
Если ваши призывы к действию содержатся в изображениях, есть большая вероятность, что подписчики упустили ваше сообщение. Хуже того, они не взаимодействуют с вашими кампаниями.
Использование кнопок с призывом к действию на основе изображений также влияет на доступность вашей электронной почты. Если вы скрываете контекст призыва к действию внутри изображения, программы чтения с экрана могут не прочитать их, что сделает вашу электронную почту недоступной для подписчиков с ослабленным зрением.
Теперь, когда вы знаете больше о кнопках с изображениями, вы должны понимать, что мое первоначальное утверждение в основном верно. Кнопки на основе изображений выглядят одинаково в каждом почтовом клиенте , где включены изображения, и только в том случае, если подписчик не использует программу чтения с экрана . Так действительно ли они пуленепробиваемые? Нет, они не. И поскольку оба этих вышеупомянутых случая невозможно отследить с помощью стандартного отслеживания электронной почты, вы не сможете узнать, какой процент ваших подписчиков испытывает такой негативный опыт.
Так что откажитесь от призывов к действию с изображениями и убедитесь, что подписчики могут видеть и использовать ваши призывы к действию независимо от того, какое устройство они используют.
Задатки красивого дизайна кнопок
Кнопки — это больше, чем просто код. Есть несколько факторов, которые делают ваши кнопки удобными и привлекательными.
Форма пуговицы
Сделайте ваши кнопки похожими на кнопки.
Все мы любим делать забавные и уникальные кнопки, но часто, если вы слишком далеко отклонитесь от ожидаемого, подписчики упустят цель и не предпримут никаких действий.Да, слова могут означать, что что-то нажимается, но, как говорится, «Картинка стоит тысячи слов».
Используйте кнопки стандартной формы, чтобы привлечь внимание людей, особенно если они сканируют. Стандартные формы включают:
Закругленные углы
Угол квадратный
Таблетка в форме
Кнопка призрака
Кнопка с затемнением
Это не значит, что с кнопками нельзя делать забавные вещи. Magic Spoon добавила к своим кнопкам несколько забавных анимированных GIF-файлов, чтобы привлечь к ним еще больше внимания.
Размер кнопки
Поскольку более 40% подписчиков открывают электронные письма на мобильных устройствах, согласно нашим ежегодным данным о рыночной доле почтовых клиентов, важно, чтобы ваша кнопка была спроектирована так, чтобы она работала на всех устройствах.
Если ваша кнопка слишком мала, на мобильных устройствах будет сложно нажимать. Если он слишком большой, он будет меньше похож на кнопку, а больше на элемент дизайна.
Было проведено несколько исследований размеров кнопок на сенсорных экранах, но исследования, похоже, чаще всего проводятся с использованием миллиметров в качестве основной единицы измерения.Что далеко не идеально. Но у некоторых получилось приличное соотношение миллиметра к пикселю.
Теперь идеальный размер кнопок для удобного нажатия на мобильных устройствах составляет от 42 до 72 пикселей (примерно 11-19 мм). Это примерно средняя высота кнопки, которую можно увидеть в Интернете, и кнопки, которые мы используем здесь, в Litmus, также попадают в этот диапазон.
В одном исследовании, которое увеличилось до 30 мм, точность от прикосновения к щелчку упала до 20 мм, так что есть момент, когда размер кнопки больше не имеет большого значения.
Место для кнопок
Убедитесь, что вокруг кнопок достаточно свободного места, чтобы они выделялись. Это также позволяет вашим подписчикам нажимать правильную кнопку.
Лучшим примером этого может быть электронное письмо с большим количеством ссылок в одном абзаце. Если вы сгруппируете свои ссылки близко друг к другу, ваши подписчики никогда не будут точно нажимать на то, что вы хотите, чтобы они нажимали, особенно на мобильных устройствах.
Визуальная обратная связь
Не каждый почтовый клиент поддерживает интерактивные элементы, но там, где это возможно, добавление немного интерактивности для обеспечения визуальной обратной связи помогает подписчикам знать, что их взаимодействие зарегистрировано.
Для них это дополнительный знак того, что на что-то можно нажать.
Это может быть как простое изменение цвета, так и сложное по вашему желанию. (Мы знаем, что иногда здорово выкладываться изо всех сил, поэтому не сдерживайтесь — но знайте, когда сдерживать себя.)
Наша собственная стандартная кнопка имеет изменение цвета, а также эффект кнопки.
Но мы тоже попробовали кое-что новенькое и очень повеселились с кнопками январской рассылки. Отличный элемент дизайна, который также было интересно «подтолкнуть».”
Текст кнопки
Держите вашу фактическую копию с призывом к действию или ярлык актуальным и по существу. Сообщите подписчикам, что вы хотите, чтобы они сделали, как можно яснее и кратко.
Обычно достаточно от 1 до 5 слов.
Эта длина также позволяет сканировать вашу электронную почту. А если есть что сказать? Включите его в заголовок над кнопкой. Регулярно сохраняя призывы к действию в пределах от 1 до 5 слов, это делает тот редкий момент, когда вы его просматриваете, гораздо более значимым.
5 способов кодирования пуленепробиваемой кнопки
С более чем 300 000 потенциальных сообщений электронной почты, действительно ли удивительно, что вы не можете сделать универсальную кнопку, которая работает везде?
Что вы можете сделать, так это сделать кнопку, которая работает почти везде. И есть несколько разных методов создания этих кнопок в зависимости от ваших потребностей. Просмотрите их, чтобы выяснить, какой из них лучше всего подходит для поддержки ваших подписчиков.
1. Кнопка условного заполнения
Спасибо Марку Роббинсу за эту кнопку с условным заполнением.Это тот, который мы используем здесь, в Litmus.
Эта кнопка использует стили для ссылки, чтобы задать стиль для всех, кроме Outlook. Затем он использует условный код для добавления заполнения, специфичного для Outlook. Поскольку заполнение Outlook контролируется отдельно, вы можете редактировать заполнение Outlook, не влияя на внешний вид кнопки в других почтовых клиентах.
Как получить круглые кнопки в бутстрапе 4?

< html >

< глава >
Как получить круглые кнопки
в бутстрапе 4?
название >

< мета кодировка = "utf-8"

9000
< meta name = "viewport" content = "width = device-width, initial-scale = 1" >

< ссылка rel = «таблица стилей» href =

< скрипт src
0
сценарий >

90 008 < скрипт src =
скрипт >

< скрипт
8 скрипт >

< стиль тип = "текст / css" >

цвет: зеленый;
}
.xyz {
размер фона: авто;
выравнивание текста: по центру;
padding-top: 100px;
}
.btn-circle.btn-sm {
ширина: 30 пикселей;
высота: 30 пикселей;
отступ: 6px 0px;
border-radius: 15px;
font-size: 8px;
выравнивание текста: по центру;
}
.btn-circle.btn-md {
ширина: 50 пикселей;
высота: 50 пикселей;
отступ: 7px 10px;
border-radius: 25px;
font-size: 10px;
выравнивание текста: по центру;
}
.btn-circle.btn-xl {
ширина: 70 пикселей;
высота: 70 пикселей;
отступ: 10 пикселей 16 пикселей;
border-radius: 35px;
font-size: 12px;
выравнивание текста: по центру;
}
стиль >
головка >
корпус < класс корпус = "xyz" >
< h2 > GeeksforGeeks h2 >

Круглый> Обычный Кнопки h5 >
< кнопка тип = "кнопка" класс = "btn btn-primary btn-circle" > Синий кнопка >
< кнопка тип = 9000 8 «кнопка» класс = «btn btn-secondary btn-circle btn-sm» > серый кнопка >
< кнопка тип = «кнопка» класс = «btn btn-success btn-circle btn-sm» > Зеленая кнопка >
< кнопка тип = «кнопка» класс = «btn btn-dangerous btn-circle btn-sm» > Красная кнопка >
< кнопка тип = «кнопка» класс = «btn btn-warning btn-circle btn-sm» > Желтая кнопка >
<900 08 кнопка тип = «кнопка» класс = «btn btn-light btn-circle btn-sm» > Белая кнопка >
< кнопка тип = «кнопка» класс = «btn btn-dark btn-circle btn-sm» > Черный кнопка >

< h5 > Большие круглые кнопки h5 >
< кнопка тип кнопки = " " " class = "btn btn-primary btn-circle btn-xl" > Синий кнопка >
< кнопка тип = 90 008 «кнопка» класс = «btn btn-secondary btn-circle btn-xl» > серый кнопка >
< кнопка тип = «кнопка» класс = «btn btn-success btn-circle btn-xl» > Зеленая кнопка >
< кнопка тип = «кнопка» класс = «btn btn-dangerous btn-circle btn-xl» > Красная кнопка >
кнопка тип = «кнопка» класс = «btn btn-warning btn-circle btn-xl» > Желтая кнопка >
<9 0008 кнопка тип = «кнопка» класс = «btn btn-light btn-circle btn-xl» > Белый кнопка >
< button type = «button» class = «btn btn-dark btn-circle btn-xl» > Черный button >
корпус >

html >
Borders · Bootstrap
Используйте утилиты для создания границ, чтобы быстро задать стиль границы и радиуса границы элемента.Отлично подходит для изображений, кнопок или любого другого элемента.
Граница
Используйте утилиты для создания границ, чтобы добавить или удалить границы элемента. Выбирайте из всех границ или по одной.
Присадка
Субтрактивное
Цвет рамки
Измените цвет границы с помощью утилит, созданных на основе цветов нашей темы.
Радиус границы
Добавьте классы к элементу, чтобы легко скруглить его углы.
Пример закругленного изображения 75x75 Пример скругленного сверху изображения 75x75 Пример скругленного справа изображения 75x75 Пример скругленного внизу изображения 75x75 Пример скругленного слева изображения 75x75 Полностью круглого изображения 75x75 Округленное изображение таблетки 150x75 Пример изображения без закруглений (отменяет округление, примененное где-либо еще) 75x75
Размеры
Используйте . Round-lg или . Round-sm для большего или меньшего радиуса границы.
Пример маленького закругленного изображения 75x75 Пример большого закругленного изображения 75x75
Как сделать кнопку со скругленными углами в CSS
CSS Кнопки со скругленными углами - мы все любим их, но как, черт возьми, вы сделать их с помощью HTML и CSS?
Хорошие новости: это очень просто сделать.
Надеюсь, вы новичок, который просто хочет получить эффект закругленной кнопки, но не знает, с чего начать.
Ничего страшного, нам всем нужно с чего-то начинать, и я здесь, чтобы помочь вам в этом.
Кнопка CSS Зеленая кнопка с дополнением и белым текстом ссылки.
Кнопка CSS с закругленными углами С закругленными углами получается , вы хотите, чтобы она была еще чуть-чуть, не так ли?
Разметка HTML: Все дело в классе css, добавленном здесь к ссылке.
кнопка CSS с закругленными углами
кнопка CSS закругленная
CSS: Затем мы добавляем отступ, цвет фона, белый текст ссылки, ширину, удаляем подчеркивание ссылки и центрируем текст. Да, и добавьте границу с радиусом 8 пикселей.
.css-button-rounded { фон: # 2fc974; цвет: #fff; дисплей: блок; отступ: 20 пикселей 10 пикселей; выравнивание текста: центр; текстовое оформление: нет; ширина: 350 пикселей; радиус границы: 8 пикселей; // здесь закругленные углы }
.css-button-закругленный {
background: # 2fc974;
цвет: #fff;
дисплей: блок;
отступ: 20 пикселей 10 пикселей;
выравнивание текста: по центру;
текстовое оформление: нет;
ширина: 350 пикселей;
радиус границы: 8 пикселей; // здесь скругленные углы
}
Не забывайте префиксы браузера CSS3: Если это не имеет смысла, дайте мне знать, и я добавлю сообщение о префиксах поставщиков браузера.
.css-button-rounded { -webkit-border-radius: 8 пикселей; -moz-border-radius: 8 пикселей; -ms-border-radius: 8 пикселей; -o-border-radius: 8 пикселей; }
.css-button-закругленный {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
-o-border-radius: 8px;
}
И, конечно, эффект зависания:
.css-button-rounded: hover { фон: # EC2951; }
.css-button-roundround: hover {
background: # EC2951;
}
Как сделать круглую кнопку в CSS
В этом уроке мы покажем вам, как сделать круглую кнопку с помощью CSS. Это очень просто, и в конце урока вы сможете сделать свои HTML-кнопки похожими на круг.
Шаг 1. Определите кнопку в HTML
Первый шаг всегда самый простой и прямой. Итак, мы определяем структуру простой кнопки с помощью HTML и помещаем в нее класс, чтобы позже мы могли стилизовать ее с помощью CSS.
<кнопка> ОК!
Шаг 2. Превратите его в квадратную кнопку
Чтобы наша кнопка была кругом, нам нужно, чтобы кнопка изначально выглядела как квадрат. Я имею в виду, давайте сделаем так, чтобы ширина и высота имели одинаковые размеры .В этом случае мы размещаем 50 пикселей.
.redondo { дисплей: блок; ширина: 50 пикселей; высота: 50 пикселей; }
Шаг 3. Поместите радиус границы 50% с помощью CSS
Теперь мы собираемся сделать наш квадрат закругленным. С радиусом края 50% мы сделаем кнопку полностью круглой.
.redondo { дисплей: блок; ширина: 50 пикселей; высота: 50 пикселей; радиус границы: 50%; }
Почему радиус кромки 50%?
Свойство CSS ‘border-radius’ дает каждому углу определенный радиус границы .Если мы используем значение «50%», мы указываем, что радиус границы составляет 50% ширины / высоты нашего элемента. В этом примере результат будет таким же, если мы поместим «50%» как «25 пикселей». Используется 50%, потому что это применимо к любому размеру элемента.
Ниже приведен пример диаграммы, чтобы понять, как "border-radius" работает в элементах:
Помните, что вы устанавливаете радиус 50% ко всем углам кнопки. Таким образом, конечный эффект состоит в том, что квадрат становится кругом.
Результат: круглая кнопка
Конечный результат - круглая кнопка, как показано ниже:
Хорошо!
При желании вы можете изменять цвета и многое другое с помощью CSS.Сообщите нам, если у вас возникнут проблемы или вопросы. Помните, что то же самое можно применить к большему количеству элементов, а не только к кнопкам.
Возможно, вас также заинтересует…
Подпишитесь на нашу рассылку
.

Значение	Детали
`блок`	Кнопка на всю ширину с закругленными углами.
`полный`	Кнопка во всю ширину с квадратными углами и без рамки слева или справа.

Значение	Детали
`прозрачный`	Кнопка с прозрачным фоном, напоминающим плоскую кнопку.
`контур`	Кнопка с прозрачным фоном и видимой рамкой.
`цельный`	Кнопка с закрашенным фоном. Полезно для кнопок на панели инструментов.

Значение	Детали
`малый`	Пуговица с меньшей высотой и набивкой. По умолчанию для кнопок в элементе.
`по умолчанию`	Кнопка с высотой и отступом по умолчанию.Полезно для кнопок в элементе.
`большой`	Пуговица с увеличенной высотой и набивкой.