Как закруглить кнопку в css
Перейти к содержимому

Как закруглить кнопку в css

  • автор:

Как закруглить кнопку?

Но во-первых, этот способ не кроссбраузерный, т.е работает на всех браузерах, кроме всеми нами «любимого» IE. В IE выход — использование картинок. иначе никак.

Отслеживать
ответ дан 18 июл 2012 в 7:30
13.6k 13 13 золотых знаков 62 62 серебряных знака 122 122 бронзовых знака

Ну о кроссбраузерности — направда. Этот способ не будет работать еще в Mozilla Firefox, Google Chrome и еще во многих браузерах. Не нужно забывать о приставках -webkit- и -moz- . -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;

Скруглённые уголки

Традиционные прямоугольные уголки в дизайне сайтов давно уже всем надоели. В моде скруглённые уголки, которые делаются не с помощью изображений, а через стили, для чего используется свойство border-radius . Это свойство может иметь одно, два, три или четыре значения разделённых пробелом, которые и определяют радиус всех уголков или каждого по отдельности.

В табл. 1 приведёно разное количество значений и вид блока, который получается в этом случае.

Код Описание Вид
div

Радиус скругления для всех уголков сразу.
div

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

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

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

В примере 1 показано создание блока со скруглёнными уголками.

Пример 1. Уголки у блока

HTML5 CSS3 IE 9+ Cr Op Sa Fx

    Радиус   
Меня — супплетивная форма винительного падежа от я.

Результат данного примера показан на рис. 1.

Блок со скруглёнными уголками

Рис. 1. Блок со скруглёнными уголками

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

Пример 2. Круглая кнопка

HTML5 CSS3 IE 9+ Cr Op Sa Fx

    Кнопка     

Результат данного примера показан на рис. 2.

Рис. 2. Круглая кнопка

В браузере Opera скругление к применяется некорректно, если не задана граница через свойство border .

Свойство border-radius можно сочетать и с другими свойствами, например, добавить к элементу тень. В примере 3 сделан набор кружков, из которых один подсвечивается с помощью box-shadow . Такой набор можно использовать для навигации по страницам или по фотографиям.

Пример 3. Свечение

HTML5 CSS3 IE 9+ Cr Op Sa Fx

    Свечение   

Результат данного примера показан на рис. 3.

Свечение вокруг кружка

Рис. 3. Свечение вокруг кружка

С помощью border-radius можно сделать не только кружок, но и эллипс, а также эллиптическое скругление у блока. Для этого надо написать не одно значение, а два через слэш. Запись 20px/10px означает, что по горизонтали радиус скругления будет 20 пикселов, а по вертикали 10 пикселов. В примере 4 показано создание эллиптических уголков для добавления к фотографии надписи оформленной как в комиксах.

Пример 4. Эллипсы

HTML5 CSS3 IE 9+ Cr Op Sa Fx

    Эллиптические уголки    

Результат данного примера показан на рис. 4.

Использование эллиптических уголков

Рис. 4. Использование эллиптических уголков

Вид уголков можно изменить и у изображений, добавляя к селектору img свойство border-radius , как показано в примере 5.

Пример 5. Изображения

HTML5 CSS3 IE 9+ Cr Op Sa Fx

    Изображения body < background: #4b5457; >img 

CSS ‘>’ selector; what is it? [duplicate]

I’ve seen the «greater than» ( > ) used in CSS code a few times, but I can’t work out what it does. What does it do?

78.1k 110 110 gold badges 165 165 silver badges 272 272 bronze badges
asked Dec 16, 2010 at 10:39
101k 50 50 gold badges 172 172 silver badges 209 209 bronze badges
Aug 16, 2023 at 6:27

7 Answers 7

> selects immediate children

For example, if you have nested divs like such:

and you declare a css rule in your stylesheet like such:

.outer > div

your rules will apply only to those divs that have a class of «middle» since those divs are direct descendants (immediate children) of elements with class «outer» (unless, of course, you declare other, more specific rules overriding these rules). See fiddle.

div < border: 1px solid black; padding: 10px; >.outer > div
 
div.outer - This is the parent.
div.middle - This is an immediate child of "outer". This will receive the orange border.
div.inner - This is an immediate child of "middle". This will not receive the orange border.
div.middle - This is an immediate child of "outer". This will receive the orange border.
div.inner - This is an immediate child of "middle". This will not receive the orange border.

Without Words

.
.

Side note

If you, instead, had a space between selectors instead of > , your rules would apply to both of the nested divs. The space is much more commonly used and defines a «descendant selector», which means it looks for any matching element down the tree rather than just immediate children as the > does.

NOTE: The > selector is not supported by IE6. It does work in all other current browsers though, including IE7 and IE8.

If you’re looking into less-well-used CSS selectors, you may also want to look at + , ~ , and [attr] selectors, all of which can be very useful.

This page has a full list of all available selectors, along with details of their support in various browsers (its mainly IE that has problems), and good examples of their usage.

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

введите сюда описание изображения

Как закруглить так кнопку при помощи css ?

Отслеживать

задан 18 мар 2021 в 10:02

Egor Pyshnov Egor Pyshnov

25 1 1 серебряный знак 8 8 бронзовых знаков

А вы где эту кнопку взяли?

18 мар 2021 в 10:13

всегда есть svg, если css не справляется

18 мар 2021 в 11:18

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

Как пример. Дальше самостоятельно)

body < background: #f3edef; >button < outline: 0; cursor: pointer; border: none; border-bottom: 5px solid #e0121e; background: linear-gradient( 0deg, #ec212b, #fa7169); color: #fff; font-size: 16px; font-family: sans-serif; text-transform: uppercase; padding: 50px; border-radius: 100px 100px 100px 100px / 200% 200%; box-shadow: 0px 10px 15px 0px rgba(255, 111, 170, 0.75); text-shadow: 1px 1px 2px gray, 0 0 1em red; >

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

body < background: #f3edef; >button < display: block; position: relative; margin: 20px; outline: 0; cursor: pointer; border: none; background: red; color: #fff; font-size: 16px; font-family: sans-serif; text-transform: uppercase; padding: 30px 50px 25px 50px; border-bottom: 5px solid #e0121e; border-radius: 50px 50px 50px 50px / 500% 500%; box-shadow: 0px 10px 15px 0px rgba(255, 111, 170, 0.75); text-shadow: 1px 1px 2px gray, 0 0 1em red; >button::before, button::after < content: ""; position: absolute; left: 5px; height: 10px; width: calc(100% - 10px); background: red; >button::before < top: -5px; border-radius: 100px 100px 0 0 / 500% 500%; >button::after < bottom: -10px; border-radius: 0 0 100px 100px / 500% 500%; border-bottom: 5px solid #e0121e; >

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *