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

Круглая кнопка с тенью

Круглая кнопка с тенью

Если кнопка расположена на белом фоне, то следует удалить стили .circle::before , т.к. они добавляют белую обводку у рамки.

  • Опубликовано: 08.05.2020
  • Рубрики: Тексты, ссылки и кнопки — простые решения
  • Метки: CSS
  • 5109 просмотров
Смотрите также:

Запись переменной из JS в файл для скачивания

Запись переменной из JS в файл для скачивания

Простое решение на JS для сохранения переменной в файл на компютер пользователя

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

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

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

Используя исключительно средства CSS3, без подключения дополнительных фоновых изображений, получился довольно не плохой результат:

Пагинация CSS3

Вроде бы все получилось более чем замечательно, ан нет, черта с два, всю общую картинку, как всегда нагло и в извращенной форме, сломал все тот же IEшка. Этот вечный тормоз прогресса, ни в какую, не захотел нормально обработать сочетание функций скругления углов border-radius и линейного градиента. Без использования градиента, кнопки теряли эффект выпуклости, становились плоскими и безжизненными, а подключив фильтр градиента, вырисовывалась и вовсе неприглядная картинка. В этом случае IEшка 6-9 отображал заданный градиент без должного закругления сторон, выступая за очерченные в круг, с помощью border-radius , края кнопок.

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

В общем вырисовалась такая картина: IE6-9 беспардонно пропускает фон кнопок, заданный с помощью фильтра реализующего линейный градиент, за скруглённые уголки.
Надо отдать должное майкрософтовским умельцам, они нехотя снялись с ручного тормоза и уже их новое детище — IE 10-й версии, более или мене сносно, справляется с одновременным использованием скругленных углов и линейного градиента.

CSS3 градиент в IE10

Конечно, мне хотелось выполнить эту задачу используя только стандарты CSS3, но не стоит забывать, что огромное количество пользователей до сих пор упорно считают IEшку своим основным браузером, а значит негоже преподносить им (пусть даже и по вине самого браузера), не до конца проработанный элемент дизайна сайта.

Посмотреть пример того что получилось на чистом CSS в конечном итоге и при желании отредактировать можно в онлайн-редакторе:

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

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

HTML-код

Ничего необычного, простой неупорядоченный список, помещенный в блок div с присвоенным ему классом .pagination , для дальнейшего формирования и редактирования стилей в CSS.

CSS-код

Вот все необходимые стили:

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

Надеюсь все у вас получится!

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

Circle button css

I’m a beginner and very confused, as a div tag when I give the same width and height with border-radius: 50% it always becomes circle. but with the tag a in case I want to make a circle button, It doesnt work that way. This is when I try to make a circle border button clickable.

13 Answers 13

For div tag there is already default property display:block given by browser. For anchor tag there is not display property given by browser. You need to add display property to it. That’s why use display:block or display:inline- block . It will work.

or very simple for <a/>

for jsfiddle reference click here

Here is a flat design circle button:

enter image description here

but the problem is that the + might not be perfectly centered vertically in all browsers / platforms, because of font differences. see also this question (and its answer): Vertical alignement of span inside a div when the font-size is big

Add display: block; . That’s the difference between a <div> tag and an <a> tag

Though I can see an accepted answer and other great answers too but thought of sharing what I did to solve this issue (in just one line).

CSS ( Created a Class ) :

HTML (Added that css class to my button) :

Note : What I actually did was proper use of ionic classes with just one line of css.

See Result your self on this JSFiddle :

For create circle button you are this codes:

The problem is that the actual width of an a tag depends on its contents. Your code has no text in the a tag, so it appears like a hunger-sunken circle. If you use the div tag along the a , you get the desired results.

Check this code out:

you could always do

html: <div <a> <button> idk whatever you want to put in the button </button> </a> </div>

css: .btn a button

works perfect in my opinion

if you want a more generic solution that will resize with the size of the screen you can use this example.

For a modern CSS approach, we now have a few tools like aspect-ratio and grid to create perfect circle buttons like so:

Setting fixed height and width on an inline element (i.e an a tag) has no effect. Like mentioned by the others, we need to set the display property to a block element. Using grid allows easy centering and generally more control of the content inside the button.

All together with some optional padding and centering:

(Leaving the red border because OP had it on there)

This is now compatible with all modern browsers. Of course your project may not allow such modernity but it is nice to start using this stuff when we can.

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

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