Home / Articles / Programming languages / Markup languages / HTML & CSS / Creating CSS3 button with rounded corners

Creating CSS3 button with rounded corners

Creating CSS3 button with rounded corners
 
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


This article explains how to create a button with rounded corners using only CSS3.

The following styles are essential for creating this kind of button.

.button {
  display: inline-block;
  padding: 5px 10px;
  color: #FFFFFF;
  text-decoration: none;
  position: relative;
  cursor: pointer;
  font-weight: bold;
}

HTML:

<a href="#" class="button">Nice button!</a>

Following styles are divided into small groups to show how each group changes the appearance of the button. It must clearly demonstrate how each CSS property works.

Pay attention, the last example of the button in the left column is a result of applying all four styles from the right column. If you want to add changes to the appearance of the button, add not just the corresponding code situated on the right side, but also all the previous codes above it. 

Appearance of the button

Group of styles

Step 1

background-color: #1ABFE5;

Step 2

text-shadow: 0 -1px 1px #565656;

Step 3

-webkit-border-radius: 7px;
border-radius: 7px;

Step 4

-webkit-box-shadow: 0 1px 3px 0 #565656;
box-shadow: 0 1px 3px 0 #565656;

Here are all styles for the button:

.button {
  display: inline-block;
  padding: 5px 10px;
  color: #FFFFFF;
  text-decoration: none;
  position: relative;
  cursor: pointer;
  font-weight: bold;
  background-color: #1ABFE5;
  text-shadow: 0 -1px 1px #565656;
  -webkit-border-radius: 7px;
  border-radius: 7px;
  -webkit-box-shadow: 0 1px 3px 0 #565656;
  box-shadow: 0 1px 3px 0 #565656;
}

It will look much better if the button changes color when hovered upon.

.button:hover {
  background-color: #1397B5;
}

Probably the only thing that might need some changes in this button, is its colour:

Appearance of the button

Button color

Orange button

background-color: #FC9F13;

Blue button

background-color: #0182C4;

Red button

background-color: #C8312D;

Pink button

background-color: #FF7FED;

 

Read also

Buttons in HTML

Buttons in HTML

Image button in HTML

Image button in HTML

Simple CSS3 gallery with zoom effect

Simple CSS3 gallery with zoom effect

Discussion (total 6 comments)

Ejikeme Princely
April 01, 2013 at 12:19 pm
This is a nice tutorial, one can generate those buttons with http://www.cssbuttoncode.com
Lloyd
September 19, 2013 at 02:34 am
Wtf? I opened the page in IE7 to test rounding, thought "yep, them thar buttons work", went to all the trouble of embedding all the code on my server and it did not work. Looked again at this page then realised that the buttons are PICTURES!! Come on!!!!!!!!!!!!!!!!!!!!!!!!
Administrator User
Administrator User
September 19, 2013 at 12:33 pm
Yep, CSS3 doesn't work in old browsers, only in new ones. So, these pictures are parts of the article to illustrate how it should look like. My fault is that I didn't provide a list of supported browsers for the current examples, but I said nothing about сross-browser.
Lloyd
September 19, 2013 at 02:57 pm
Well, you are providing a service for free, so no complaints. It was kind of annoying at the time tho'... (did you guess?), Anyway, cross browser stuff is difficult. I had researched this a couple of years ago and forgotten .. there really is no getting around it -- unless you want to use images or a very messy java-rich hack, forget the nice curved corners in IE6, 7, 8. I have corporate customers who still use those 3 believe it or not. Cheers
Administrator User
Administrator User
September 19, 2013 at 08:13 pm
Believe or not, but I almost never use CSS3, because of IE. My customers also want it to work in IE, at least in IE7. And I aslo do it with images as background.
Altaf Hussain
November 18, 2013 at 05:23 am
Yeah. I agree, CSS3 does not work in older IE browsers. But you can make it work using css3pie (progressive internet explorer).

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation