Create a Button using CSS: simple and quick

Aside from having a best server hosting, creating a very appealing yet simple website is also a must. Picking the right color, font and buttons is indeed important. There are many ways to create buttons using CSS. These buttons are created using images, icons or labels. We can use the same images on all the buttons of the website. Today I will show you how to create a really simple button and in very quick way.

Simple Button

To create a button we need to add following code in our Stylesheet (style.css)

.btn {
padding: 6px 8px;
background: #000;
color: #fff;
}

save it after adding the code in to your Stylesheet. Now we have to use following code to show on our website. You can insert this button on your website wherever you want. Put this code to your website page or index file.

by putting the code in your website you will get a button like below

You can change the button background by changing the value in background: #000; and you can change the text color by changing the value in color: #fff;.

Round Corners

If you want to make your button with round corners we have to add following 2 more line in our Stylesheet (style.css). So the code will look like below

.btn {
padding: 6px 8px;
background: #000;
color: #fff;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}

I have added the radius of 4px you can change the value that you want to use. The result of the round corner button is following

Hover Effect

You can also make it hover by adding few more lines to your code in Stylesheet (style.css)

.btn {
padding: 6px 8px;
background: #000;
color: #fff;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
.btn:hover {
text-decoration: none;
background: #757575;
color: #fff;
}

here is the example of hover button that we have created

Click here

I hope you will find this tutorial helpful it will help you to make button using CSS. Its simple and quick and more effective rather then using an image as button.
Special thanks to Tutorials Bucket for this code.

Stationary Branding Mockup

Related Posts

4 Comments

  1. Agile
    June 13, 2011 at 5:24 am - Reply

    Thanks for this wonderful tips.

  2. Leh Tezgutol
    October 26, 2010 at 5:36 pm - Reply

    my favourite tutorial thanks for this perfect post (:

  3. Lanphear
    October 17, 2010 at 4:04 am - Reply

    this is something that has helped me very recetnly so thankyou

  4. George Soltes
    October 8, 2010 at 8:01 pm - Reply

    Hello, your website is really great.

Leave A Comment