Кнопка круглая 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 ответов

65

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

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

18

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

.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

16

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 имеет четкий фон. Для этого я должен использовать стили и темы. Однако я не знаю, как собрать все воедино. Не мог бы кто-нибудь дать какой-нибудь совет?…

5

Это лучшая ссылка с использованием шрифта-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

3

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

<code>

<span></span>

</code>

Поделиться

Mir    

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

2

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

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

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

Поделиться

Itchy    

14 июня 2015 в 11:54

0

Если вы загрузили эти файлы локально, вы можете изменить следующие классы в 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

0

Используйте значки с удивительным набором шрифтов (альтернатива значкам начальной загрузки). Вот еще примеры: 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

0

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

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

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

Поделиться

Isabella Riquetti    

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

Похожие вопросы:

Сделайте круглую кнопку с рамкой

Я пытаюсь сделать круглую кнопку с прозрачным фоном и цветной рамкой. Как я могу это сделать? Я приложил скриншот одного из моих приложений iOS, который показывает, чего я хочу.

Измените прямоугольную кнопку Qt на круглую

Я пытаюсь создать круглую кнопку в Qt. В конструкторе была создана простая форма с одной кнопкой QPushButton . Я пытаюсь превратить это в круглую кнопку, используя setMask() . Как только setMask()…

Сделайте круглую кнопку фиксированного размера как изображение в iphone sdk

Я разрабатываю приложение, в котором мне нужно округлить кнопку в виде изображения (как я загрузил). Он показывает, что два угла прямые, а rest имеет круглую форму. Я попробовал с…

Кто-нибудь знает какую-нибудь бесплатную круглую кнопку для разработки в Windows-mobile?

Кто-нибудь знает какую-нибудь бесплатную круглую кнопку для разработки в Windows-mobile ? заранее спасибо

как создать круглую / круглую кнопку в win32 API с помощью visual c++

У меня есть приложение Window (win32 API) в visual c++. Я не использую MFC. Я должен создать круглую / круглую кнопку с изображением bitmap. Мое приложение имеет скинутый вид. Может ли кто-нибудь…

Как создать круглую кнопку в android с изображением на заднем плане?

Я хочу создать круглую кнопку в android. Это xml, который я использую: <?xml version=1.0 encoding=utf-8?> <shape xmlns:android=http://schemas.android.com/apk/res/android…

реализуйте круглую кнопку iOS в Android

Я пытаюсь создать круглую кнопку iOS в Android. Как вы, возможно, знаете, кнопки Android имеют серый фон, в то время как круглая кнопка iOS имеет четкий фон. Для этого я должен использовать стили и…

Как создать круглую кнопку?

Я хочу создать круглую круглую кнопку. Эта кнопка должна выглядеть как круг. Этот код дает круглую прямоугольную кнопку. UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect];…

Как сделать круглую кнопку в android

У меня есть приложение, в котором я должен сделать круглую кнопку, которую я успешно сделал, но то, что я хочу, когда я нажимаю кнопку, а затем меняю фон, рисуемый, но когда я делаю это, круглая…

Измените кнопку на круглую программно

Имея круглую кнопку в xml, я хочу изменить ее цвет при нажатии на нее. Я делаю это с помощью этого кода, но он снова меняется на квадратную форму, а не на исходную круглую:…

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

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

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

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

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

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

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

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

Кнопки

И класс 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

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

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

Разметка

<div>
    <input type=»checkbox»>
    <label></label>
</div>

Элемент .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

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

Разметка

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

<div>
    <input type=»checkbox»>
    <label></label>
</div>

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>.

<div>
    <input type=»checkbox»>
    <label><i></i></label>
</div>

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.

<div>
    <input type=»checkbox»>
    <label><i></i></label>
</div>

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

add

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

add

add

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

add

add

add

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

add

add

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

add

add

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

Реклама

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

  .red_div {
  цвет фона: красный;
  ширина: 200 пикселей;
  высота: 100 пикселей;
}
  

  радиус границы: 15 пикселей 15 пикселей;
  

  радиус границы: 15px 15px 15px;
  

  радиус границы: 15px 15px 15px 15px;
  

  граница-верх-левый-радиус: 15 пикселей;
граница-верх-правый-радиус: 15 пикселей;
граница-нижний-правый-радиус: 15 пикселей;
граница-нижний-левый-радиус: 15 пикселей;
  

  кнопка {
  ширина: 200 пикселей;
  высота: 100 пикселей;
  радиус границы: 20 пикселей;
}
  

 <кнопка>
ОК!
 

 .redondo {
  дисплей: блок;
  ширина: 50 пикселей;
  высота: 50 пикселей;
} 

 .redondo {
  дисплей: блок;
  ширина: 50 пикселей;
  высота: 50 пикселей;
  радиус границы: 50%;
}