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.
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.
Let's say that you are using the <button> element. The HTML code for your
page will probably look something like this:
(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.
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).
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:
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.)
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.
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:
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.
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.
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/.
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.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Put Rounded Buttons on Your Website
