How to Put Rounded Buttons on Your Website

Inserting buttons with round corners, oval buttons and even circular buttons


How to Put Rounded Buttons on Your Website

by Christopher Heng, thesitewizard.com

I was asked by a visitor how he could add "round buttons" on his web pages. I am not sure whether he meant buttons with curved corners, oval-shaped buttons or genuinely round buttons. In any case, this article shows you how to create all of them.

Preamble

You will need to know a bit of HTML and CSS for this tutorial. You don't need to be an expert, but you should, at minimum, know how to insert CSS code as well as add HTML to your page.

Although there is more than one way to insert a button into your web page, the same solution applies to all of them.

Rounding the Corners of a Button in CSS

Let's say that you are using the <button> element. The HTML code for your page will probably look something like this:

<button type="button" id="demo_button" value="demo">Click this for the sake of clicking</button>

(Note that if you don't even know how to insert a button, and need an explanation for the above code, please read How to Create a Button in HTML.)

To round the corners, use the same CSS method to create round corners for boxes, that is, apply the border-radius property.

#demo_button {
  border-radius: 20px ;
}

As mentioned in the main article on creating round corners, border-radius treats each corner as though it is part of a circle with the given radius (see picture below).

Quarter circle with radius of 20 pixels marked out

Since I only supplied one number, 20 pixels, the corner is round. If you want to make it into an oval-like shape, specify two numbers, separated by a slash (ie, "/"), like this:

#demo_button {
  border-radius: 40px / 20px ;
}

The above makes the corner look something like the picture below. (Note that the picture is not drawn to scale. It is just an illustration to show you how those numbers are used.)

Ellipse with different horizontal and vertical values

If you want more details about this, see the main article where this is explained.

In any case, a button with "border-radius: 20px" should look like this:

The button looks like a flattened oval, with the sides curved from top to bottom, because the button is so short (height-wise) that the bottom of the arc of the top corner touches the start of the arc of the bottom corner. If you prefer a rectangular button with only the corners slightly curved, either increase the font size of your words (which will increase the height of the button as a side-effect), directly make the button taller, or decrease the radius.

For example, the code below increases the height of the button and shrinks the radius of the corners.

#demo_button {
  border-radius: 15px ;
  height: 48px ;
}

The effect of those changes can be seen below.

What should you do if you really want a round button (as in one that genuinely looks like a circle)? If you think about it, if you were to envelop a circle in a rectangle so that it fits perfectly within it, you will get a square. Each side of the square will have a length equal to the diameter of the circle, meaning that the radius of the circle is half the square's side.

As such, if you want your button to look like a circle, all you need to do is to create a button with equal height and width, and give it a border-radius that is half that number.

Take the button below as an example.

The CSS code for it is as follows:

#demobutton {
  border-radius: 50px ;
  height: 100px ;
  width: 100px ;
  font-size: 2em ;
}

As you can see, I gave the button a width and height of 100 pixels, making it a square. Then I set a border-radius of 50 pixels, since that is half of 100.

Before you get confused, note that the font-size that I used in the example has nothing to do with making the button round. I added it because I only put one character (the "#") on that gigantic demo button. You do not have to include it unless you actually want to double the size of your text. I suspect, though, that if you are creating round buttons, your intention is probably to display some sort of picture on that button. If so, just insert an <img> element the usual way between the opening and closing button tags.

Other Types of Buttons

The above method of using border-radius can be used with any one of the other 3 methods of creating buttons. That is, it is not specific to the button element.

Browser Compatibility

The CSS border-radius property requires a modern web browser. It will not work in Internet Explorer 8 or earlier, nor in long-obsolete versions of Firefox, Chrome and Safari.

Copyright © 2019 Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.

Related Articles

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

How to Put Rounded Buttons on Your Website





Home
Donate
Contact
Link to Us
No Spam Policy
Privacy Policy
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.