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

Содержание

9 статей на тему круглых кнопок / Хабр

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

Здесь представлены .

Оригинал статьи на Временно.нет

Создание круглых ссылок-кнопок с помощью CSS


Минус этого метода в наличии большого количества span-ов и наличие двух графических файлов для создания фона. К плюсам можно отнести появляющуюся рамочку вокруг кнопки при наведении мышкой и возможность изменения высоты кнопки.

Владимир Токмаков: Рамки, тени, кнопки, плашки


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

Создание и оформление кнопок с изменяемыми размерами


Минус: тег button не всегда удобен для использования. Плюс: эффект нажатия.

Круглые уголки, интересные варианты


Минус: слишком большое количество тегов i при реализации. Плюс: не зависит от размера шрифта, быстрое создание нового скина, не зависит от фона на котором лежит, при отключенных картинках белая ссылка будет на нужном фоне (в данном случае оранжевом). Статья на русском.

Создание кнопок с простым CSS и HTML


Минус: простота оформления. Плюсы: не зависит от размера шрифта, всего один файл для создания оформления и очень простая реализация.

CSS овальные кнопки


Минус: наличие div`а при реализации, два файла картинок.

Простые круглые кнопки с помощью CSS (Wii Buttons)


Плюсs: всего один файл для создания оформления, очень простая реализация, достаточно красивое оформление.

Оформление кнопки с помощью «раздвижных дверей»


Минусы: два файла картинок, проблемы с эффектом нажатия кнопки. Плюсы: красивое оформление.

Создание красивых кнопок с помощью CSS


В минусах этого метода так же наличие двух картинок для фонов. Плюс: очень простая реализация.

CSS круглый Div с кнопками внутри?



Я работаю над «клоном Саймона», и у меня есть Div (то есть квадрат прямо сейчас), и я пытаюсь сделать его круглым. Прямо сейчас я заворачиваю 4 цветные пуговицы внутрь (с правильной длиной), чтобы они сидели внутри него правильно.

.simon-container {
  border: 2px solid purple;
}

.panel {
  opacity: .35;
  width: 300px;
  height: 300px;
  float: left;
  font-size: 22px;
  color: black;
}

.simon {
  margin: 0 auto;
  border: 1px solid black;
  border-radius 10px;
  display: flex;
  flex-wrap: wrap;
  width: 600px;
  height: 600px;
}

#green {
  background-color: green;
}

#red {
  background-color: red;
}

#yellow {
  background-color: yellow;
}

#blue {
  background-color: blue;
}
<div>
  <div>
    <button type="button" disabled>1</button>
    <button type="button" disabled>2</button>
    <button type="button" disabled>3</button>
    <button type="button" disabled>4</button>
  </div>
</div>

В принципе, я хочу, чтобы DIV, в котором находятся кнопки, был кругом. Я думал, что

border-radius: 50%; будет работать, но это не так, и я предполагаю, что это из-за кнопок.

Есть ли способ, которым я могу сделать div кругом, но все, что течет за пределами div в основном, но «cut off», чтобы он не переливался за пределы границы? Возможно ли это? Я предполагаю, что установка overflow: hidden сделает это правильно?

Хотя я до сих пор не уверен, почему div не станет кругом.

html css
Поделиться Источник msmith2114     08 мая 2017 в 19:50

3 ответа


  • Button значков: круглый значок закрытия

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

    ..

  • Горизонтальное выравнивание div с фоном css

    я хочу выровнять изображение между двумя кнопками внутри div <div> <button class=button>left</button> <div class=picture> <button class=button>right</button> </div> это то, что я пробовал http://jsfiddle.net/27YPH / он работает, когда я использую тег img…



3

Установите радиус границы равным 50% и добавьте переполнение: скрыто:

.simon-container {
  border: 2px solid purple;
}

.panel {
  opacity: .35;
  width: 300px;
  height: 300px;
  float: left;
  font-size: 22px;
  color: black;
}

.simon {
  margin: 0 auto;
  border: 1px solid black;
  display: flex;
  flex-wrap: wrap;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  overflow: hidden;
}

#green {
  background-color: green;
}

#red {
  background-color: red;
}

#yellow {
  background-color: yellow;
}

#blue {
  background-color: blue;
}
<div>
  <div>
    <button type="button" disabled>1</button>
    <button type="button" disabled>2</button>
    <button type="button" disabled>3</button>
    <button type="button" disabled>4</button>
  </div>
</div>

Поделиться j08691     08 мая 2017 в 19:54


Поделиться James McCannon     08 мая 2017 в 20:08



0

Вы пробовали это?

. simon-container {
      border: 2px solid purple;
      border-radius:50%;
      overflow:hidden;
}

Поделиться Aiwass 418     08 мая 2017 в 19:56


  • Как я могу убедиться, что текст находится внутри округлого div?

    Я хочу иметь свой круглый div, чтобы держать текст внутри него. как вы видите на картинке Как я могу сделать это с помощью CSS? потому что мой круглый div будет иметь текст, как будто он был возведен в квадрат. http://jsfiddle.net/kUJq8 / div { width: 320px; height: 320px; border-radius: 50%;…

  • Расстояние между двумя кнопками внутри DIV

    У меня есть DIV, который содержит несколько кнопок. Я хочу, чтобы расстояние между этими кнопками составляло 16 пикселей внутри этого DIV. Может ли кто-нибудь сказать мне, как это сделать?


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


Круглый спидометр с Jquery / CSS в браузере

Мне нужно сделать круглый объект, очень похожий на спидометр (с движущейся стрелкой внутри, указывающей значение) в браузере.

в настоящее время для всех других элементов на этой странице Я использую…


как сделать круглый угол div

как сделать круглый угол div в css и у меня есть пункты списка меню <div class=menu> <ul> <li class=active><a href=index.html>HOME</a></li> <li…


Круглый угол CSS

У меня есть сценарий, в котором я должен создать кнопку на Asp:LinkButton. У меня есть создать кнопку на нем. Теперь я хочу установить круглый угол на этой кнопке. Пожалуйста, скажите мне решение…


Button значков: круглый значок закрытия

Я видел, что другие приложения используют круглый значок для закрытия представления. Единственный подобный значок, который я нашел, — это UIBarButtonSystemItemStop . Но это представляет собой только…


Горизонтальное выравнивание div с фоном css

я хочу выровнять изображение между двумя кнопками внутри div <div> <button class=button>left</button> <div class=picture> <button class=button>right</button>. ..


Как я могу убедиться, что текст находится внутри округлого div?

Я хочу иметь свой круглый div, чтобы держать текст внутри него. как вы видите на картинке Как я могу сделать это с помощью CSS? потому что мой круглый div будет иметь текст, как будто он был…


Расстояние между двумя кнопками внутри DIV

У меня есть DIV, который содержит несколько кнопок. Я хочу, чтобы расстояние между этими кнопками составляло 16 пикселей внутри этого DIV. Может ли кто-нибудь сказать мне, как это сделать?


круглый div с img внутри width<height height<width HTML / CSS

Итак, у меня есть круглый div с img внутри. Проблема: #mydiv { width: 50px; height: 50px; overflow: hidden; border-radius: 25px; } Теперь, если пользователь загружает картинку с меньшей высотой, чем…


Круглый ползунок с CSS

Какой самый простой способ сделать круглый слайдер? учитывая такой вклад, как этот: <input type=range id=myRange value=1 max=100> Это просто обычный прямой входной диапазон, я пытаюсь сделать. ..


Codenameone : как создать круглый значок с CSS?

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

свойство border-radius — учебник CSS

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

border-color и border-style, с помощью которых можно настраивать цвет и стиль границы. Однако все рамки у нас получались с прямыми углами. Теперь мы расскажем, каким образом можно сделать закругленные углы в CSS для границ.

Как закруглить углы: свойство CSS3 border-radius

Закругление углов в CSS можно сделать для любого элемента HTML-страницы. Для этого необходимо применить к нему свойство border-radius с соответствующим значением. Чаще всего значение указывается в пикселях, но можно также использовать и другие единицы, например, em или проценты (в последнем случае вычисление производится относительно ширины блока).

Эффект данного свойства будет заметен только при условии, что у стилизуемого элемента имеется цветной фон и/или граница. Например:


.borderElement {
  background-color: #EEDDFF;
  border: 6px solid #7922CC;
  border-radius: 25px;
}

Стиль, описанный выше, даст следующий результат на элементе <div> размером 200×200 пикселей:


Вы также можете сделать закругленные края только для верхних или нижних углов элемента либо задать каждому углу разный радиус скругления — большое поле для фантазии! Пример:


.borderElement {
  background-color: #EEDDFF;
  border: 6px solid #7922CC;
  border-radius: 25px;
}

.borderElement1 {
  background-color: #FFE8DB;
  border: 6px solid #FF5A00;
  border-radius: 15px 100px 15px 100px;
}

Но и это еще не всё: вместо простых круглых углов можно задавать эллиптическое скругление. Для этого понадобится указать два значения, разделенные косой чертой (для горизонтальной и вертикальной полуосей эллипса). Приведем пример на блоке размером 150×450 пикселей:


.borderElement {
  background-color: #EEDDFF;
  border: 6px solid #7922CC;
  border-radius: 280px/100px;
}

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

  • border-top-left-radius — для верхнего левого угла;
  • border-top-right-radius — для верхнего правого угла;
  • border-bottom-left-radius — для нижнего левого угла;
  • border-bottom-right-radius — для нижнего правого угла.

Принцип скругления углов

На рисунке ниже показано, каким образом вычисляется скругление углов в CSS. Так, если для угла указано одно значение, — например, 20px, — это означает, что закругление будет происходить по окружности с радиусом 20 пикселей. В случае, когда задаются два значения через косую черту, например, 30px/20px, закругление углов будет происходить по эллипсу. Первое значение в таком случае является длиной горизонтальной полуоси эллипса — 30px, а второе — длиной вертикальной полуоси — 20px:


Свойство CSS border-radius поддерживается всеми современными версиями браузеров.

Далее в учебнике: свойство box-shadow — создаем тени для элементов.

html — Как можно отобразить две круглые кнопки в строке и одну над ней по центру без интервала между двумя нижними и наоборот?

Как кнопки на левой стороне могут отображаться как на правой? Отдельные группы разделяются отступом и отображаются с корневым потоком.

.group {
  display: flow-root;
  padding: 7px 0px 7px 0px;
}

button.a {
  float: left;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid #8B8B8B;
}
<div><span>
      <button></button>
    </span><span>
      <button></button>
      <button></button>
    </span><span>
      <button></button>
      <button></button>
    </span>
</div>

<div><span>
      <button></button>
      <button></button>
    </span><span>
      <button></button>
    </span>
</div>

0

user8652270 11 Авг 2020 в 20:19

1 ответ

Лучший ответ

Есть много способов сделать это, вот простой способ сделать это без изменения html

РЕДАКТИРОВАТЬ: поскольку ваши круги обычно не касаются границ, вам нужно будет вручную подтолкнуть их к месту назначения

. group {
  float: left;
  padding: 7px 0px 7px 0px;
  clear: both;
}

span {
  display: flex;
  text-align: center;
  justify-content: center
}

button.a {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid #8B8B8B;
}
.move-up {
  margin-top: -3px;
}
<div><span>
      <button></button>
    </span><span>
      <button></button><button></button>
    </span><span>
      <button></button><button></button>
    </span>
</div>

<div><span>
      <button></button><button></button>
    </span><span>
      <button></button>
    </span>
</div>

1

Huangism 11 Авг 2020 в 18:45

Создание закругленных кнопок для сайтов | 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 кнопок, 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 код кнопки, естественно вставив свою ссылку вместо знака #, в любое место будующей статьи.


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

Похожие по Тегам статьи


Кнопка Foundation

Кнопка Стиль

Фонд предлагает шесть стилей кнопок. .button класс создает синюю кнопку вместе с прокладкой. Различные цвета для класса кнопки: .secondary , .success , .info , .warning или .alert :

примеров

<Кнопка тип = класс «Кнопка» = «Кнопка»> По умолчанию кнопка </>
<Тип Button = «кнопка» класс = «Кнопка вторичного»> Вторичный </ кнопка>
<Кнопка тип = «кнопка» класс = «Кнопка успеха»> Успех </ кнопка>
<Кнопка тип = «кнопка» класс = «Кнопка информация»> Информация </ Кнопка>
<Кнопка тип = «кнопка» класс = «предупреждение кнопка»> Предупреждение </ кнопка>
<Кнопка тип = «кнопка» класс = «кнопка оповещения»> оповещения </ кнопка>


Попробуйте »

Класс Button можно использовать в <a> , <button> , или <input> элемент:

примеров

<A HREF = «#» класс = «button info» роли = «button»> Кнопка Link </ а>
<Кнопка тип = «кнопка» класс = «Кнопка Информация»> Кнопка </ кнопка>
<Тип входного = класс «Кнопка» = «Кнопка Информация» значение = «Input Button»>
<Тип входного = «отправить» класс = «Кнопка Информация» Значение = «Отправить Кнопка»>


Попробуйте »
Почему бы HREF тег #?

Когда мы не хотим, чтобы прыгать и нажмите на ссылку, чтобы получить «404», мы можем установить тег HREF #.

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

Мы можем использовать .large , .small или .tiny класс , чтобы установить размер кнопки:

примеров

<Тип Button = «кнопка» класс = «кнопка большой»> Большой </ кнопка>
<Кнопка тип = класс «Кнопка» = «Кнопка»> По умолчанию кнопка </>
<Тип Button = «кнопка» класс = «кнопка маленький»> Малый Кнопка </>
<Тип Button = «кнопка» класс = «кнопка крошечные»> Крошка </ кнопка>


Попробуйте »

кнопка Округлые

Вы можете использовать .radius и .round класс , чтобы установить круглую кнопку:

примеров

<Кнопка тип = класс «Кнопка» = «Кнопка»> Кнопка по умолчанию </ Кнопка>
<Кнопка тип = «кнопка» класс = «радиус Кнопка»> Радиус Кнопка </ кнопка>
<Кнопка тип = «кнопка» класс = «круглая кнопка»> Круглые кнопки </ Кнопка>


Попробуйте »

Кнопка расширения

Вы можете использовать . expand класс для установки кнопки на 100% широкополосного доступа:

примеров

<Кнопка тип = класс «Кнопка» = «Кнопка»> Кнопка по умолчанию </ Кнопка>
<Кнопка тип = «кнопка» класс = «Кнопка расширения»> Expanded Кнопка </ кнопка>


Попробуйте »

кнопка Отключить

Вы можете использовать .disabled класс нажмите на кнопку Настройка не доступна:

примеров

<Кнопка тип = класс «Кнопка» = «Кнопка»> Кнопка по умолчанию </ Кнопка>
<Кнопка тип = «кнопка» класс = «кнопка отключена»> Кнопка Отключено </ Кнопка>


Попробуйте »

Как создать кнопку с закругленными углами с помощью CSS

В CSS3 вы можете придать элементам закругленные углы с помощью свойства border-radius. Давайте посмотрим на это на примере.

Предположим, у вас есть следующая разметка.

  

Чтобы сделать div видимым, мы установим его ширину и высоту, а также зададим ему красный цвет фона.

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

Ниже приводится результат вышеуказанного.

Чтобы сделать границы div скругленными, вы можете добавить следующий стиль:

Вышеуказанное устанавливает радиус 15 пикселей в верхнем левом, верхнем правом, нижнем левом и нижнем правом углах элемента. Чем выше значение радиуса, тем более скругленным становится край.

Ниже вы можете увидеть результат указанной выше разметки.

Свойство border-radius можно записать несколькими способами.

Указание одного значения для свойства установит для всех четырех краев элемента радиус этого значения.

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

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

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

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

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

Вышеуказанное явно устанавливает значение для каждого края.Вышеупомянутое является сокращением для приведенного ниже CSS, который также явно дает значение для каждого края.

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

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

Добавление закругленных углов к кнопкам

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

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

Кнопка будет выглядеть так:

Вот еще несколько примеров готовых кнопок

Фрагмент кода дизайна CSS с круглой кнопкой

Кнопки

CSS3 приносят с собой некоторые удивительные особенности стиля, такие как закругленные углы, градиенты и границы, но дополнительно вызывают массу мигрени у людей, которым необходимо выполнять их на веб-страницах, из-за отсутствия поддержки Internet Explorer для этих невероятных моментов. Итак, в сегодняшней публикации мы обсудим пример Round Corner для дизайна вашей кнопки, который выполняется только с помощью HTML и CSS.

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