CSS Basics: How to make a CSS rounded corners button link

CSS Rounded corners buttons – we all love them, but how the heck do you make one using HTML and CSS?

Good news: this is extremely easy to do.

Hopefully you’re a novice who just wants to get a rounded button effect but don’t know where to start.

It’s okay, we all have to start somewhere and I’m here to guide you through it.

CSS button
A green, padded button with white link text.

CSS button rounded
With rounded corners, it makes
you want to push it just a little bit more, right?

The HTML markup:
It’s all about the css class added here to the a link.

The CSS:
Then we add some padding, a background color, white link text, width, remove link underline and centre the text. Oh, and add a border radius of 8px.

Dont forget your CSS3 browser prefixes:
If this makes no sense, let me know and I’ll add a post about Browser Vendor prefixes.

And a hover effect of course:

Related Posts

No Comment

Comments are closed.