{"id":4913,"date":"2022-05-21T02:00:00","date_gmt":"2022-05-21T00:00:00","guid":{"rendered":"https:\/\/alvarotrigo.com\/epa\/css-round-button\/"},"modified":"2025-05-23T12:46:58","modified_gmt":"2025-05-23T10:46:58","slug":"css-round-button","status":"publish","type":"post","link":"https:\/\/alvarotrigo.com\/blog\/css-round-button\/","title":{"rendered":"17+ CSS Round Buttons [Examples &#038; How to create]"},"content":{"rendered":"\n<p>When building UI for a web application, each browser comes with default styles, buttons, textboxes and any input UI has its own default style.<\/p>\n\n\n\n<p>With CSS you can edit these default styles and create a unique look. <strong>HTML Round buttons styled with CSS<\/strong> will make your website more interesting and engaging because you have your own style.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" data-src=\"https:\/\/alvarotrigo.com\/blog\/assets\/imgs\/2022-05-21\/css-round-button-intro-examples.jpeg\" alt=\"CSS round button examples\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how-do-you-make-a-button-more-rounded-css%3F\">How Do You Make A Button More Rounded CSS?<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_MWQoxvL\" data-src=\"\/\/codepen.io\/anon\/embed\/MWQoxvL?height=450&amp;theme-id=1&amp;slug-hash=MWQoxvL&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed MWQoxvL\" title=\"CodePen Embed MWQoxvL\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>To create a rounded button you have to make use of the <code>border-radius<\/code> CSS property.<\/p>\n\n\n\n<p>The higher the value for that property the more rounder the corners will be.<\/p>\n\n\n\n<p>You can use any CSS unit for the <code>boorder-radius<\/code> property. It can be pixels, ems, rems, percentages etc.<\/p>\n\n\n\n<p>Here&#8217;s an example of a button with slightly rounded corners:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-class\">.my-button<\/span>{\n    <span class=\"hljs-comment\">\/* Adding the rounded corners *\/<\/span>\n    <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">5px<\/span>;\n\n    <span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">1px<\/span> solid <span class=\"hljs-number\">#000<\/span>;\n    <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">10px<\/span> <span class=\"hljs-number\">20px<\/span>;\n    <span class=\"hljs-attribute\">background<\/span>: yellow;\n    <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">2em<\/span>;\n    <span class=\"hljs-attribute\">cursor<\/span>: pointer;\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The HTML markup doesn&#8217;t require anything special. In this case we&#8217;ll be using a <code>button<\/code> elemen but you can use any other such as <code>div<\/code>, <code>span<\/code> or <code>p<\/code>.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"my-button\"<\/span>&gt;<\/span>Example<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>And here&#8217;s the codepen with the example so you can play a bit with it:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_oNEeRby\" data-src=\"\/\/codepen.io\/anon\/embed\/oNEeRby?height=450&amp;theme-id=1&amp;slug-hash=oNEeRby&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed oNEeRby\" title=\"CodePen Embed oNEeRby\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/oNEeRby\" title=\"Open CodePen\" target=\"_blank\" rel=\"noopener nofollow\">Open CodePen<\/a><\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"css-round-buttons-examples\">CSS Round Buttons Examples<\/h2>\n\n\n\n<p>Whether you are getting inspiration or just need something different other than the default browser style &#8211; We have a little something for everyone, so here are over 15 amazing round buttons styled with CSS that you can use.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"1.-css-round-buttons-with-hover-effect\">1. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/BaYZbpw\" target=\"_blank\" rel=\"noopener nofollow\">CSS Round Buttons With Hover Effect<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_BaYZbpw\" data-src=\"\/\/codepen.io\/anon\/embed\/BaYZbpw?height=450&amp;theme-id=1&amp;slug-hash=BaYZbpw&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed BaYZbpw\" title=\"CodePen Embed BaYZbpw\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/BaYZbpw\" title=\"Open CodePen\" target=\"_blank\" rel=\"noopener nofollow\">Open CodePen<\/a><\/div>\n<\/div>\n\n\n\n<p>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!<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>If you are thinking in adding hover effects to your round buttons, check out this list with the <a href=\"https:\/\/alvarotrigo.com\/blog\/best-css-button-hover-effects\/\">10 Best CSS Button Hover Effects<\/a><\/p>\n<\/blockquote>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>The buttons are made using HTML link tags, so you know they will be useful in terms of SEO.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"2.-minimal-circular-3d-buttons\">2. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/poawYRO\" target=\"_blank\" rel=\"noopener nofollow\">Minimal Circular 3D Buttons<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_poawYRO\" data-src=\"\/\/codepen.io\/anon\/embed\/poawYRO?height=450&amp;theme-id=1&amp;slug-hash=poawYRO&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed poawYRO\" title=\"CodePen Embed poawYRO\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/poawYRO\" title=\"Open CodePen\" target=\"_blank\" rel=\"noopener nofollow\">Open CodePen<\/a><\/div>\n<\/div>\n\n\n\n<p>Built with pure CSS (no third-party libraries). The CSS is easy to understand as everything is named appropriately.<\/p>\n\n\n\n<p>Each button uses an HTML link tag, so it will be good for SEO reasons and the HTML markup is easily reused and clear.<\/p>\n\n\n\n<p>The style is minimal and looks very modern.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"3.-css-round-checkbox-button\">3. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/rNJwRjb\" target=\"_blank\" rel=\"noopener nofollow\">CSS Round Checkbox Button<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_rNJwRjb\" data-src=\"\/\/codepen.io\/anon\/embed\/rNJwRjb?height=450&amp;theme-id=1&amp;slug-hash=rNJwRjb&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed rNJwRjb\" title=\"CodePen Embed rNJwRjb\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/rNJwRjb\" title=\"Open CodePen\" target=\"_blank\" rel=\"noopener nofollow\">Open CodePen<\/a><\/div>\n<\/div>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>It is 3D and animated when you toggle between the two states. It looks super cool and is very engaging.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"4.-3d-css-round-button-with-check-mark\">4. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/abqwMJo\" target=\"_blank\" rel=\"noopener nofollow\">3D CSS Round Button With Check Mark<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_abqwMJo\" data-src=\"\/\/codepen.io\/anon\/embed\/abqwMJo?height=450&amp;theme-id=1&amp;slug-hash=abqwMJo&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed abqwMJo\" title=\"CodePen Embed abqwMJo\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/abqwMJo\" title=\"Open CodePen\" target=\"_blank\" rel=\"noopener nofollow\">Open CodePen<\/a><\/div>\n<\/div>\n\n\n\n<p>A 3D HTML button that has a checkmark inside it, once pressed it lights up as a blue colour &#8211; you could also change this colour if it doesn\u2019t match your style.<\/p>\n\n\n\n<p>Just pure CSS, no third-party libraries, so very portable and no pre-renders needed to use this one.<\/p>\n\n\n\n<p>You can use the pre-defined CSS variables to change the colours as well. Makes it very easy for you.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"5.-subtle-3d-toggle-round-button-(css)\">5. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/GRQEeWm\" target=\"_blank\" rel=\"noopener nofollow\">Subtle 3D Toggle Round Button (CSS)<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_GRQEeWm\" data-src=\"\/\/codepen.io\/anon\/embed\/GRQEeWm?height=450&amp;theme-id=1&amp;slug-hash=GRQEeWm&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed GRQEeWm\" title=\"CodePen Embed GRQEeWm\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/GRQEeWm\" title=\"Open CodePen\" target=\"_blank\" rel=\"noopener nofollow\">Open CodePen<\/a><\/div>\n<\/div>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>The subtle animation change between the two states looks amazing and is extremely minimal, not overpowering at all.<\/p>\n\n\n\n<p>It basically just uses a shadow to pull off the effect of the button going up and down, very lightweight indeed.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"6.-arcade-round-button-(css)\">6. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/OJQgqpx\" target=\"_blank\" rel=\"noopener nofollow\">Arcade Round Button (CSS)<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_OJQgqpx\" data-src=\"\/\/codepen.io\/anon\/embed\/OJQgqpx?height=450&amp;theme-id=1&amp;slug-hash=OJQgqpx&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed OJQgqpx\" title=\"CodePen Embed OJQgqpx\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/OJQgqpx\" title=\"Open CodePen\" target=\"_blank\" rel=\"noopener nofollow\">Open CodePen<\/a><\/div>\n<\/div>\n\n\n\n<p>Something a little different and more specific: a great looking 3D arcade button that has a cool effect when you click it.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"7.-css-round-button-badges\">7. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/KKQqEWx\" target=\"_blank\" rel=\"noopener nofollow\">CSS Round Button Badges<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_KKQqEWx\" data-src=\"\/\/codepen.io\/anon\/embed\/KKQqEWx?height=450&amp;theme-id=1&amp;slug-hash=KKQqEWx&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed KKQqEWx\" title=\"CodePen Embed KKQqEWx\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/KKQqEWx\" title=\"Open CodePen\" target=\"_blank\" rel=\"noopener nofollow\">Open CodePen<\/a><\/div>\n<\/div>\n\n\n\n<p>Pure CSS round button badges with text and a split background between the top and bottom of each button.<\/p>\n\n\n\n<p>The HTML structure is super clean and easy to understand, you can enter your own text, subtitle and bottom icon.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"8.-round-buttons-with-padding\">8. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/rNJwRyb\" target=\"_blank\" rel=\"noopener nofollow\">Round Buttons With Padding<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_rNJwRyb\" data-src=\"\/\/codepen.io\/anon\/embed\/rNJwRyb?height=450&amp;theme-id=1&amp;slug-hash=rNJwRyb&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed rNJwRyb\" title=\"CodePen Embed rNJwRyb\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/rNJwRyb\" title=\"Open CodePen\" target=\"_blank\" rel=\"noopener nofollow\">Open CodePen<\/a><\/div>\n<\/div>\n\n\n\n<p>A set of round buttons which a clean HTML structure that uses link tags, so they are great for SEO purposes.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"9.-animated-circular-buttons\">9. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/abqwMWo\" target=\"_blank\" rel=\"noopener nofollow\">Animated Circular Buttons<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_abqwMWo\" data-src=\"\/\/codepen.io\/anon\/embed\/abqwMWo?height=450&amp;theme-id=1&amp;slug-hash=abqwMWo&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed abqwMWo\" title=\"CodePen Embed abqwMWo\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/abqwMWo\" title=\"Open CodePen\" target=\"_blank\" rel=\"noopener nofollow\">Open CodePen<\/a><\/div>\n<\/div>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>The animations are both smooth and subtle.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"10.-animated-round-css-buttons\">10. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/dydRrWM\" target=\"_blank\" rel=\"noopener nofollow\">Animated Round CSS Buttons<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_dydRrWM\" data-src=\"\/\/codepen.io\/anon\/embed\/dydRrWM?height=450&amp;theme-id=1&amp;slug-hash=dydRrWM&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed dydRrWM\" title=\"CodePen Embed dydRrWM\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/dydRrWM\" title=\"Open CodePen\" target=\"_blank\" rel=\"noopener nofollow\">Open CodePen<\/a><\/div>\n<\/div>\n\n\n\n<p>Minimal and subtle animated CSS round buttons with icons in the middle of them.<\/p>\n\n\n\n<p>Each button has its own text below as well. The icons are nicely centred within the button and the HTML structure is clean.<\/p>\n\n\n\n<p>Upon hovering, there is a cool effect and when you move the mouse off, there is an exit animation.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"11.-round-buttons-with-border\">11. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/gOvREWR\" target=\"_blank\" rel=\"noopener nofollow\">Round Buttons With Border<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_gOvREWR\" data-src=\"\/\/codepen.io\/anon\/embed\/gOvREWR?height=450&amp;theme-id=1&amp;slug-hash=gOvREWR&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed gOvREWR\" title=\"CodePen Embed gOvREWR\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/gOvREWR\" title=\"Open CodePen\" target=\"_blank\" rel=\"noopener nofollow\">Open CodePen<\/a><\/div>\n<\/div>\n\n\n\n<p>A set of very simple but effective CSS round buttons, just pure HTML and CSS, no third-party libraries or CSS pre-renderers.<\/p>\n\n\n\n<p>Change the colour within the CSS code to match your design. They have a nice subtle hover effect on them as well.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"12.-square-to-round-css-buttons\">12. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/WNMOmjJ\" target=\"_blank\" rel=\"noopener nofollow\">Square To Round CSS Buttons<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_WNMOmjJ\" data-src=\"\/\/codepen.io\/anon\/embed\/WNMOmjJ?height=450&amp;theme-id=1&amp;slug-hash=WNMOmjJ&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed WNMOmjJ\" title=\"CodePen Embed WNMOmjJ\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/WNMOmjJ\" title=\"Open CodePen\" target=\"_blank\" rel=\"noopener nofollow\">Open CodePen<\/a><\/div>\n<\/div>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>Sometimes a fully rounded button doesn\u2019t 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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"13.-rounded-plus-and-minus-buttons\">13. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/eYVRXWX\" target=\"_blank\" rel=\"noopener nofollow\">Rounded Plus And Minus Buttons<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_eYVRXWX\" data-src=\"\/\/codepen.io\/anon\/embed\/eYVRXWX?height=450&amp;theme-id=1&amp;slug-hash=eYVRXWX&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed eYVRXWX\" title=\"CodePen Embed eYVRXWX\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/eYVRXWX\" title=\"Open CodePen\" target=\"_blank\" rel=\"noopener nofollow\">Open CodePen<\/a><\/div>\n<\/div>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>Both the HTML and CSS are simple and easy to understand, great if you wish to make changes or improvements.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"14.-floating-round-css-buttons\">14. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/abqwMwo\" target=\"_blank\" rel=\"noopener nofollow\">Floating Round CSS Buttons<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_abqwMwo\" data-src=\"\/\/codepen.io\/anon\/embed\/abqwMwo?height=450&amp;theme-id=1&amp;slug-hash=abqwMwo&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed abqwMwo\" title=\"CodePen Embed abqwMwo\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/abqwMwo\" title=\"Open CodePen\" target=\"_blank\" rel=\"noopener nofollow\">Open CodePen<\/a><\/div>\n<\/div>\n\n\n\n<p>Here in this example, we have some pure HTML and CSS round buttons, they use the \u2018a&#8217; tag, so they are great for SEO.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"15.-round-css-social-media-buttons\">15. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/oNEwVwb\" target=\"_blank\" rel=\"noopener nofollow\">Round CSS Social Media Buttons<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_oNEwVwb\" data-src=\"\/\/codepen.io\/anon\/embed\/oNEwVwb?height=450&amp;theme-id=1&amp;slug-hash=oNEwVwb&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed oNEwVwb\" title=\"CodePen Embed oNEwVwb\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/oNEwVwb\" title=\"Open CodePen\" target=\"_blank\" rel=\"noopener nofollow\">Open CodePen<\/a><\/div>\n<\/div>\n\n\n\n<p>Built using the bootstrap CSS framework and a little jQuery to trigger the pop-in animation for each button.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>Also, there are some hexagonal alternatives as well if you like them.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"16.-bootstrap-round-buttons-(css)\">16. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/BaYZbZm\" target=\"_blank\" rel=\"noopener nofollow\">Bootstrap Round Buttons (CSS)<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_BaYZbZm\" data-src=\"\/\/codepen.io\/anon\/embed\/BaYZbZm?height=450&amp;theme-id=1&amp;slug-hash=BaYZbZm&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed BaYZbZm\" title=\"CodePen Embed BaYZbZm\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/BaYZbZm\" title=\"Open CodePen\" target=\"_blank\" rel=\"noopener nofollow\">Open CodePen<\/a><\/div>\n<\/div>\n\n\n\n<p>A selection of round buttons that are built using the CSS framework Bootstrap.<\/p>\n\n\n\n<p>You have a range of uses for these, and as you can see they all have their own icons to show off.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"17.-custom-css-circle-buttons\">17. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/QWQgogx\" target=\"_blank\" rel=\"noopener nofollow\">Custom CSS Circle Buttons<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_QWQgogx\" data-src=\"\/\/codepen.io\/anon\/embed\/QWQgogx?height=450&amp;theme-id=1&amp;slug-hash=QWQgogx&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed QWQgogx\" title=\"CodePen Embed QWQgogx\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/QWQgogx\" title=\"Open CodePen\" target=\"_blank\" rel=\"noopener nofollow\">Open CodePen<\/a><\/div>\n<\/div>\n\n\n\n<p>A cool custom look for a set of round CSS buttons, a little rustic. They have an animation on hover and click.<\/p>\n\n\n\n<p>If you hold down the click, the button travels further during its animation.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"18.-social-media-circle-buttons\">18. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/ZEryPyP\" target=\"_blank\" rel=\"noopener nofollow\">Social Media Circle Buttons<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ZEryPyP\" data-src=\"\/\/codepen.io\/anon\/embed\/ZEryPyP?height=450&amp;theme-id=1&amp;slug-hash=ZEryPyP&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ZEryPyP\" title=\"CodePen Embed ZEryPyP\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/ZEryPyP\" title=\"Open CodePen\" target=\"_blank\" rel=\"noopener nofollow\">Open CodePen<\/a><\/div>\n<\/div>\n\n\n\n<p>A set of pure HTML and CSS buttons that are using a circular design with social icons in the middle &#8211; Great for use inside a <a href=\"https:\/\/alvarotrigo.com\/blog\/website-footers\/\">website footer<\/a> or at the bottom of a website.<\/p>\n\n\n\n<p>Try hovering over each button and watch the hover effect they have.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"related-articles\">Related Articles<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/alvarotrigo.com\/blog\/toggle-switch-css\/\">20 Best CSS Toggle Switches [Examples]<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/alvarotrigo.com\/blog\/progress-bar-css\/\">Beautiful CSS progress bars [Examples]<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/alvarotrigo.com\/blog\/hamburger-menu-css\/\">Hamburger Menu with pure CSS With Examples<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/alvarotrigo.com\/blog\/html-css-tabs\/\">20 Cool HTML &amp; CSS Tabs [Examples]<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Check out how to create rounded buttons with CSS and get inspiration from these 17 codepen examples.<\/p>\n","protected":false},"author":11,"featured_media":4912,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[106],"tags":[9,16,126,17],"class_list":["post-4913","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-css","tag-design","tag-inspiration","tag-web"],"acf":[],"_links":{"self":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/4913","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/comments?post=4913"}],"version-history":[{"count":4,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/4913\/revisions"}],"predecessor-version":[{"id":18171,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/4913\/revisions\/18171"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/media\/4912"}],"wp:attachment":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/media?parent=4913"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/categories?post=4913"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/tags?post=4913"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}