Styling a Button in CSS

This post is for those who are not into CSS and HTML and normally get stuck trying to style their buttons

Every day on almost every website we come across these lovely buttons and on some we get the plain old boring default ones. We are not concerned with the boring ones, but here’s a small tip (which most web guys would know already) to style your ‘Buttons’ on your web page easily.

Lets say we want to create this.

This type of a Button is made of Two Components. The Text part, “Unsubscribe” and the image part.

But that’s not all you need as a background image. What you need is a background image that has the image for all the button states, namely, hover, active, regular, and disabled (if needed). So you need to start with an image which looks like this.

Now we get to the CSS part. Select a “classname” for your button that you want to style. Lets say it’s “funkybutton”. For that our base CSS for the button would go like this.

<style>input.funkybutton {
background-image: url(css/submit.gif);
background-repeat: no-repeat;
width: 115px;
height: 25px;
background-color: white;
border: none;
color: white;
padding-top: 1px; /* this is specifically for text alignment. adjust for your font-size and font*/ }
</style>

And an HTML part for this

<input name="submit" type="submit" id="submit-<?php the_ID(); ?>" tabindex="5" value="Submit Comment"/>

And this together should give you this button:

But we are not done yet. Now we need the rest of the states for the same button to be covered, and that’s done line this in the stylesheet.

<style>
input.funkybutton {
background-image: url(css/submit.gif);
background-repeat: no-repeat;
width: 115px;
height: 25px;
background-color: white;
border: none;
color: white;
padding-top: 1px; /* this is specifically for text alignment. adjust for your font-size and font*/ }

input.submit:hover {
background-position: 0 -25px;
}

input.submit:active {
background-position: 0 -50px;
}

</style>

Giving you a fully functional button like this:

Give it a try. (This same button is user everywhere in this theme as well)