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.
|
1 |
<a class="css-button-rounded" href="https://ontrendwebsites.com/">CSS button rounded</a> |
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.
|
1 2 3 4 5 6 7 8 9 10 |
.css-button-rounded { background: #2fc974; color: #fff; display: block; padding: 20px 10px; text-align: center; text-decoration: none; width: 350px; border-radius: 8px; // the rounded corners are here } |
Dont forget your CSS3 browser prefixes:
If this makes no sense, let me know and I’ll add a post about Browser Vendor prefixes.
|
1 2 3 4 5 6 |
.css-button-rounded { -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; } |
And a hover effect of course:
|
1 2 3 |
.css-button-rounded:hover { background: #EC2951; } |
No Comment