Верстаем круглые кнопки на CSS3.
Здравствуйте, дорогие читатели. Мы уже изучили многие свойства, которые появились в CSS3, но просто их знать мало. Нужно обязательно практиковаться! И вот сегодня я покажу, как создать круглые кнопки на CSS3.
Откроем файл index.html и создадим простенькую структуру
Ничего особенного. Просто 3 блока с классом .button Перейдём теперь к стилям.
body <
background: url(http://subtlepatterns.com/patterns/extra_clean_paper.png);
>
.button <
display: inline-block;
margin: 40px;
width: 100px;
height: 100px;
background: url(http://subtlepatterns.com/patterns/extra_clean_paper.png);
cursor: pointer;
border-radius: 50%;
box-shadow: 0 3px 20px rgba(0,0,0,.25),
inset 0 2px 0 rgba(255,255,255,.6),
0 2px 0 rgba(0,0,0,.1),
inset 0 0 20px rgba(0,0,0,.1);
>
Фон для документа и наших кнопок я взял с сайта subtlepatterns.com.
Мы делаем наши div строчно-блочными, чтобы они выстроились по горизонтали, задаём им высоту, ширину, отступ от краёв браузера, скругление 50%, чтобы получить круг, и при наведении курсор делаем pointer. Здесь нет ничего сложного, но тень я не зря отделил в стилях, т.к. это именно та часть, которая может вызвать затруднения, хотя, там тоже всё просто, и это вы сейчас увидите.
Задав первую тень, мы уже увидим контур нашего круга:
box-shadow: 0 3px 20px rgba(0,0,0,.25);
Затем мы задаём внутреннюю тень, чтобы у нас сверху появилась такая оконтовочка, и кнопка стала более объёмной.
box-shadow: 0 3px 20px rgba(0,0,0,.25),
inset 0 2px 0 rgba(255,255,255,.6);
Следующая внешняя тень нужна для того, чтобы немного затемнить место под кнопкой снизу, а следующая внутренняя затемняет пространство внутри кнопки для пущего эффекта)
box-shadow: 0 3px 20px rgba(0,0,0,.25),
inset 0 2px 0 rgba(255,255,255,.6),
0 2px 0 rgba(0,0,0,.1),
inset 0 0 20px rgba(0,0,0,.1);
Как видите, по-началу кажется сложно, много свойств, но, если разобраться, то всё оказывается намного проще. Итак, вот наш конечный результат:
Теперь реализуем поведение при наведении на блок
.button:hover <
box-shadow: inset 0 0 20px rgba(0,0,0,.2),
0 2px 0 rgba(255,255,255,.4),
inset 0 2px 0 rgba(0,0,0,.1);
>
Мы уже разобрались с тенями в блоке, а теперь попробуйте разобраться сами с тем, что происходит при наведении. Точно так же оставьте только одну тень и посмотрите, что происходит, а затем добавьте вторую и посмотрите, что изменилось, и так далее.
Наконец, давайте добавим иконки нашим кнопкам, чтобы было не очень скучно. Для этого изменим немного html
Мы просто добавили дополнительный класс для каждой кнопки и теперь давайте зададим стили для них
.btn-photo <
background: url(http://defaulticon.com/sites/default/files/styles/icon-front-page-32×32-preview/public/field/image/MD-camera-photo_0.png) center center no-repeat;
>
.btn-settings <
background: url(http://defaulticon.com/sites/default/files/styles/icon-front-page-32×32-preview/public/field/image/settings.png) center center no-repeat;
>
.btn-tag <
background: url(http://defaulticon.com/sites/default/files/styles/icon-front-page-32×32-preview/public/field/image/tag.png) center center no-repeat;
>
Здесь мы просто добавляем второй фон для каждой кнопки, взяв иконки с сайта defaulticon.com.
Вот и всё. Сегодня мы рассмотрели, как создать круглые кнопки на CSS3.
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 5 ):
Симпатично и работает во всех основных браузерах
в современных версиях — во всех. а так. старые версии ie не поддерживают border-radius
opera квадрат показала, второй раз открыл — норм)
Здравствуйте. Возник вопрос насчет адреса картинки. Такой код у меня отлично сработал: background: url(http://test.ru/image.jpeg); А вот такой нет: background: url(image.jpeg); Почему не сработал второй? Ведь картинка лежит в корне, а не в папке.
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
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:
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
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 almost all browsers (now that IE is sunset). Of course your project may not allow such modernity but it is nice to start using this stuff when we can.
Как создать круглую Progress Button
Урок по реализации круглой кнопки загрузки (далее progress button) by Colin Garven. Будем использовать, описанную by Jake Archibald, технику анимации SVG линий для того, чтобы анимировать progress button и показать пользователю состояния «success and fail».
Сегодня мы покажем вам как создать изящную progress button. Это уникальный концепт submit button, предложенный by Colin Garven. Сперва взгляните на это (Demo ), постарайтесь придумать, как реализовать, и просто наслаждайтесь анимацией. Идея состоит в следующем: при первом клике submit button трансформируется в круг, который покажет анимацию загрузки, используя свои границы (далее бордер). Когда анимация закончится, кнопка вернет исходную форму и покажет отметку, указывающую, что подтверждение прошло успешно или нет.
Существует несколько способов реализовать кнопку с таким эффектом. Думая о реализации только посредствам CSS, самой тяжёлой частью кажется круг прогресса. Существует техника реализации с помощью свойства clip. Anders Ingemann написал отличный полный tutorial (на LESS). Но мы будем использовать технику, основанную на SVG, CSS transitions и немного JS. Что касается круга прогресса, отметок success /fail, мы воспользуемся техникой рисования SVG линий, описанную by Jake Archibald.
Стоит отметить, что анимирование SVG может быть проблематичным для некоторых браузеров. Так что воспринимайте этот tutorial только как экспериментальное упражнение.
The Master plan
Если вы внимательно изучили Colin’s Dribbble shot, то должны были заметить, что нам следует позаботиться о нескольких состояниях кнопки. Интересная часть – переход между двумя такими состояниями. Сперва мы должны показать простую кнопку с прозрачным фоном и цветным бордером. При наведении мышки кнопка заполняется цветом бордера, а текст становится белым.
При нажатии на кнопку (для того, что бы, например, подтвердить отправку формы), текст должен плавно исчезнуть, ширина кнопки — уменьшится до состояния круга, бордер — стать уже, и должна начаться анимация. Мы будем использовать SVG-круг для анимации, так что нам необходимо убедиться, что получившаяся кнопка такого же размера и в той же позиции, что и SVG-круг, который виден в этот момент. Затем мы рисуем круг, изображающий загрузку подтверждения.
Когда подтверждение завершено, а круг полностью нарисован, кнопка должна снова расшириться, нарисовать галочку в случае успешного подтверждения. И закрашиваем кнопку соответственно.
В случае неудачи подтверждения, нужно показать состояние ошибки.
Давайте создадим нашу разметку со всеми необходимыми элементами.
Разметка
Для разметки нам потребуется главный контейнер, кнопка со спаном(span), содержащим текст, и три SVG:
Используем Method Draw, ведь проще всего воспользоваться онлайн SVG генератором, чтобы нарисовать галочку и крестик для кнопки. Размеры всех SVG будут 70х70, так как высота нашей кнопки 70рх. Если мы хотим круг с бордером толщиной в 5 единиц нам нужно установить правильный радиус, когда будим рисовать его в графическом редакторе, да так чтобы весь круг с его бордером имел высоту 70рх. Заметьте, что в SVG обводка рисуется симметрично границе объекта. К примеру, обводка толщиной в 2рх увеличит круг радиусом в 10рх к реальным толщине и высоте 20+2 вместо 20+4(ширина бордера дважды), то есть формула 2*r+border. Для нашего случая мы знаем 2*r+5=70, от сюда наш круг должен иметь радиус в 32,5рх. Таким образом выходит: />.
К сожалению, мы не можем использовать только эти базовые размеры, потому что дефолтные параметры вставки у каждого браузера свои и мы не можем контролировать, где «анимация загрузки начнётся». Таким образом, нам придётся конвертировать эту форму в path и использовать его. Вы можете легко осуществить это в Method Draw under Object > Convert to Path.
Для крестика мы будем использовать четыре элемента, которые можно нарисовать со средней точки, и анимировать так же как галочку.
Итак, у нас есть все необходимые элементы. Продумаем порядок действий и начнем стилизацию.
Сперва необходимо стилизовать контейнер для кнопки:
Укажем нашей кнопке цвета и шрифты. Что бы она соответствовала концепту, установим правильный бордер и шрифт Montserrat:
Также ставим transition для всех свойств, которые будут анимироваться (background-color, width etc.).
При наведении курсора мыши меняем цвет фона и цвет текста:
Уберем все обводки (outline):
Все SVG должны быть находиться по центру, все pointer-events отключены:
Формы не должны иметь цвета заливки, так как мы хотим играть только с обводкой. Мы не показываем элементы ни в каких состояниях кнопки, кроме нужного, так что давайте спрячем их, сделав прозрачными:
Наш загрузочный круг будет создан установкой stroke-width в 5 единиц:
Success/fail индикаторы будут иметь обводку тоньше, и она должна быть белой. Свойству stroke-linecap установим значение round, так они будут красивее. У них установим быстрое изменение прозрачности:
Теперь давайте подрезюмируем и вспомним наш master plan. Нам необходимо было иметь возможность стилизовать три добавленных состояния (помимо дефолтного) кнопки и специальных элементов. Будем использовать классы “loading”, “success” и “error” для их индикации.
Кнопка станет круглой и будет выглядеть в точности как загрузочный круг SVG, когда мы начнем процесс загрузки:
Помним, что мы уже установили transition, когда задавали стили для кнопки. Текст должен быстро исчезнуть, когда начнется анимация загрузки,…
… путем установки нулевого значения для прозрачности:
При смене состояний с loading на success/error нам не нужен transition, просто оставим текст скрытым.
Когда мы убираем все классы и возвращаем кнопку к исходному состоянию. Тексту нужно немного больше времени для появления, так что установим другие значения длительности анимации и ее задержки для нормального состояния:
При достижении последнего состояния необходимо переопределить transition, так как нам не надо анимировать цвет бордера или широту кнопки:
Зададим цвета для последнего состояния:
Когда будет применен необходимый класс, нужно показать нашу SVG и анимировать stroke-dashoffset установкой следующео значения для transition:
Добавим easing для анимации широты кнопки:
Если вы любите играть с другими easing-функциями – пробуйте Ceaser, CSS Easing Animation Tool by Matthew Lein.
Со стилями определились, творим магию дальше.
JavaScript
Начнем с инициализации некоторых элементов: button – это html-элемент button, progressEl – SVG элемент кольцо progress bar, а successEl, errorEl – SVG-элементы галочка и крестик соответственно:
Добавили функцию SVGEI, которая будет использоваться для того, то бы предоставить SVG-элементы и их paths. Мы кэшируем path и соответственно длину для каждого. Изначально мы «оттягиваем» все paths, управляя значениями свойств strokeDasharray и strokeDashoffset. Позже мы «втянем» их обратно, когда покажем загрузочный круг, или галочку, или крестик. Эту технику хорошо объясняет Jake Archibald в статье Animated line drawing in SVG. Устанавливаем значение stroke-dasharray равное длине path и оттягиваем его. Установив значение stroke-dashoffset также равное его длине, мы больше не видим его. Когда нам нужно будет показать фигуру — установим offset на 0, имитируя рисование фигуры:
Далее, мы должны инициализировать onclick event для нашей кнопки. Сначала кнопка превратится в круг (с помощью добавления класса loading). После окончания анимации, либо будет вызвана callback функция, либо прогресс установится на 100%. В данный момент кнопка отключается (это событие должно бы быть самым первым, однако такой браузер как firefox, например, не сможет удалить transitionend event):
17+ CSS Round Buttons [Examples & How to create]
When building UI for a web application, each browser comes with default styles, buttons, textboxes and any input UI has its own default style.
With CSS you can edit these default styles and create a unique look. HTML Round buttons styled with CSS will make your website more interesting and engaging because you have your own style.
A CSS round button can look way more stylish and elegant than the boxy default style, which can look a bit sharp and brutal. Minimalism and a modern look go well with rounded corners, this makes UI look and feel softer and less harsh.
How Do You Make A Button More Rounded CSS?
To create a rounded button you have to make use of the border-radius CSS property.
The higher the value for that property the more rounder the corners will be.
You can use any CSS unit for the boorder-radius property. It can be pixels, ems, rems, percentages etc.
Here's an example of a button with slightly rounded corners:
The HTML markup doesn't require anything special. In this case we'll be using a button elemen but you can use any other such as div , span or p .
And here's the codepen with the example so you can play a bit with it:
CSS Round Buttons Examples
Whether you are getting inspiration or just need something different other than the default browser style — We have a little something for everyone, so here are over 15 amazing round buttons styled with CSS that you can use.
1. CSS Round Buttons With Hover Effect
In our first example, we have some cool CSS round buttons that have a hover effect on them. They lose their solid background colour when you hover, try it out!
If you are thinking in adding hover effects to your round buttons, check out this list with the 10 Best CSS Button Hover Effects
The spacing between the icons is nice and they look very minimal, you can easily change the colours in the CSS code as there are some variables you can edit.
The buttons are made using HTML link tags, so you know they will be useful in terms of SEO.
2. Minimal Circular 3D Buttons
Built with pure CSS (no third-party libraries). The CSS is easy to understand as everything is named appropriately.
Each button uses an HTML link tag, so it will be good for SEO reasons and the HTML markup is easily reused and clear.
The style is minimal and looks very modern.
3. CSS Round Checkbox Button
Not every CSS round button needs to be a basic HTML link tag, this one is using a checkbox in the background and acts as a toggle switch.
It is 3D and animated when you toggle between the two states. It looks super cool and is very engaging.
4. 3D CSS Round Button With Check Mark
A 3D HTML button that has a checkmark inside it, once pressed it lights up as a blue colour — you could also change this colour if it doesn’t match your style.
Just pure CSS, no third-party libraries, so very portable and no pre-renders needed to use this one.
You can use the pre-defined CSS variables to change the colours as well. Makes it very easy for you.
5. Subtle 3D Toggle Round Button (CSS)
Another checkbox based CSS round button. It is cleverly set up to be very reusable as in the HTML, a wrapper class is used and the structure is simple enough.
The subtle animation change between the two states looks amazing and is extremely minimal, not overpowering at all.
It basically just uses a shadow to pull off the effect of the button going up and down, very lightweight indeed.
6. Arcade Round Button (CSS)
Something a little different and more specific: a great looking 3D arcade button that has a cool effect when you click it.
This would be great for a games website or some other arcaded related design. A fun button which can be used to create an engaging UI.
7. CSS Round Button Badges
Pure CSS round button badges with text and a split background between the top and bottom of each button.
The HTML structure is super clean and easy to understand, you can enter your own text, subtitle and bottom icon.
Even though these are badges, you can use them and make them clickable so that a user can enter a new page or trigger an action.
8. Round Buttons With Padding
A set of round buttons which a clean HTML structure that uses link tags, so they are great for SEO purposes.
You can easily change the text and add more to each button. They have a minimal look to them and will fit in with any modern and clean design.
9. Animated Circular Buttons
Two examples of some round buttons that are animated. The first one has a rotor effect, the outside padding spins around when you hover. The second button pulses its border when hovered.
The HTML structure is clean and easy to understand. You can change the text inside the link tag, which is also great for SEO purposes as web crawls can follow these buttons with ease.
The animations are both smooth and subtle.
10. Animated Round CSS Buttons
Minimal and subtle animated CSS round buttons with icons in the middle of them.
Each button has its own text below as well. The icons are nicely centred within the button and the HTML structure is clean.
Upon hovering, there is a cool effect and when you move the mouse off, there is an exit animation.
11. Round Buttons With Border
A set of very simple but effective CSS round buttons, just pure HTML and CSS, no third-party libraries or CSS pre-renderers.
Change the colour within the CSS code to match your design. They have a nice subtle hover effect on them as well.
12. Square To Round CSS Buttons
This example shows you how you can slowly increase the roundness of CSS buttons, starting off with a square and moving towards a full circle.
Sometimes a fully rounded button doesn’t work well in every design and you may want to only create a rounded button with the corners, check out the CSS, it is simple enough and shows you how you can create this style.
13. Rounded Plus And Minus Buttons
If you are looking for dark themed buttons, this one is for you. We have some plus and minus buttons with hover and click effects, very subtle effects but not overpowering.
Both the HTML and CSS are simple and easy to understand, great if you wish to make changes or improvements.
14. Floating Round CSS Buttons
Here in this example, we have some pure HTML and CSS round buttons, they use the ‘a' tag, so they are great for SEO.
The coolest thing here is the fact that these buttons are using CSS float to position them, check out the CSS to see how it all works.
15. Round CSS Social Media Buttons
Built using the bootstrap CSS framework and a little jQuery to trigger the pop-in animation for each button.
These buttons have their own hover effects and a pop-in animation which clicked, the border expands and stays there for a few seconds. Very subtle and lightweight.
Also, there are some hexagonal alternatives as well if you like them.
16. Bootstrap Round Buttons (CSS)
A selection of round buttons that are built using the CSS framework Bootstrap.
You have a range of uses for these, and as you can see they all have their own icons to show off.
17. Custom CSS Circle Buttons
A cool custom look for a set of round CSS buttons, a little rustic. They have an animation on hover and click.
If you hold down the click, the button travels further during its animation.
18. Social Media Circle Buttons
A set of pure HTML and CSS buttons that are using a circular design with social icons in the middle — Great for use inside a website footer or at the bottom of a website.
Try hovering over each button and watch the hover effect they have.
Related Articles
About the author:
Luke Embrey is a full-stack developer, BSc in Computer Science and based in the UK.
You can find out more about him at https://lukeembrey.com/
report this ad
report this ad