Free Design Resources: CSS Buttons

34SP.com Staff

5 years ago

Last month we created a set of buttons in Photoshop PSD format, that you can download, edit and use as you wish (if you haven’t already, you can still grab them here). This month we’ll be looking at how we can build these buttons using just CSS and HTML. That’s right, we’re not going to use any images to create these buttons, instead be building them by writing code. These buttons will work with the vast majority of modern browsers and with any of 34SP.com’s UK hosting account types. You can download the source code of this tutorial here.

To get started, simply add this line of code to your html document, in the ‘body’ section. This is our link, the text inside the a tag will be the text on our button.

We now add the following code to the document’s CSS, inside the button class. Using the code below we can create a red button, with rounded corners. In order to get perfect rounded corners, please make sure your ‘border-radius’ is exactly half the number of pixels of your button’s height.

Now we’re going to add a the background gradient, to make our button look even better. The 2 gradient colours I’m using are #bd2e1d & #891e13, although you can use any colours you wish. Creating gradients in CSS can be quite code heavy, to save time I used http://www.colorzilla.com/gradient-editor/, which will generate the gradient code for you.

If you preview your button and hover over it with your mouse, it should look something like this

That completes this tutorial. You can of course, build on the code we’ve written here to add images, icons etc to your buttons. If you use any of the code featured in this tutorial, we’d love to hear from you so please feel free to leave a comment and let us know how you got on.

The CSS in this tutorial was written to be compliant with most modern browsers (including current versions of Chrome, Firefox, Safari and Internet Explorer). That means the CSS will work as intended on the majority of mainstream browsers, and will gracefully degrade when viewed on older or less compliant browsers.