Create a Sleek CSS3 Button Under a Minute

 Create a Sleek CSS3 Button Under a Minute

As a web developer we often find ourselves creating buttons for submit buttons, links and more. Doing this the old fashioned way can take a lot of time as you need to open photoshop and create that gradient background, shadow effects etc.
In this tutorial I'm going to show you how to create a very sleek web 2.0 CSS3 button in under a minute.

You can take a look at the end result here or you can download it here


Getting Started

We're going to start by creating the button in basic CSS.

border: 1px solid #5d9046;
background: #67AA25;
color: #fff;
text-transform: uppercase;
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: none;
width: 156px;
font-size: 14px; 
font-weight: bold;
padding: 8px 0;
text-align: center; 
display: block;

This is going to give us a very simple square button as illustrated below:

Pretty boring huh? Let's style it up a little bit :D


Creating Rounded Corners

Now that we've created the basic button, we can create rounded corners easily thanks to CSS3.
Simply add the following code into your button class to create the rounded corners.

	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;

Now our button looks like this:



Adding Shadows

Thanks to CSS3 you can easily add shadows to your boxes or text. I've pasted some code below to give your button even more style:


	text-shadow: 1px 1px 1px #666;
	-moz-box-shadow: 0 1px 3px #111;
	-webkit-box-shadow: 0 1px 3px #111;
	box-shadow: 0 1px 3px #111;

This code adds shadow to our text, and to our buttons. Neat huh?



Creating a Gradient Background for our Button

Thanks to an awesome application created recently by the creators of ColorZilla, we can now easily create gradients using css3 without having to use images.
Link: Gradient Editor


Using the gradient editor, I've created my background and the editor compiled the following code for me to use:


	background: #3F8EB5; /* old browsers */
	background: -moz-linear-gradient(top, #3F8EB5 0%, #1D76A0 100%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3F8EB5), color-stop(100%,#1D76A0)); /* webkit */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3F8EB5', endColorstr='#1D76A0',GradientType=0 ); /* ie */

It falls back wonderfully so you don't have to worry about older browsers not seeing your button etc.
Below you can see the end result of our button:




Now you can go ahead and add :hover and :active pseudo-classes to bring the button even more to life.

I hope you guys enjoyed this tutorial!
Feel free to leave comments below :D

Related Articles



Tags: , , ,

27 Comments

  1. 1 Rob W says:
    Dec 05, 2010 at 6:32 pm

    Do you have a completed example? The hover and active states are the tricky part, of course — it looks nice to switch the shadows and/or gradient, and possibly placement… but you still need to degrade nicely in IE6 (and most of us still have to support that…).

    I’d love to move to CSS for my buttons, but I still haven’t found an example out there that really works well across browsers.

  2. 2 Name (required) says:
    Dec 06, 2010 at 11:33 am

    Can you access this button programmatically? By that I mean do you give it a name like all buttons and in ASP.NET reference it? Can it be tired to a click event?

    Thanks for showing how easy it is to make it.

  3. 3 JP says:
    Dec 09, 2010 at 11:08 pm

    hey guys thanks for the comments.
    You can take a look at the final product at the beginning of the article.

    Also, you can give it names etc; you just have to edit your submit button with the css code provided above :)

  4. 4 Will says:
    May 18, 2011 at 6:28 pm

    I didn’t realize you could specify rounded corners. I always thought it had to be a graphic.

  5. 5 bba says:
    Aug 19, 2011 at 10:22 pm

    nice one
    really helpful
    God bless

  6. 6 Watt says:
    Feb 02, 2012 at 5:35 pm

    CSS3 : thank you !
    Very practical and very quick…

    Thx

  7. 7 skirting boards says:
    Jan 28, 2013 at 1:11 am

    For sure, this was a very good posting, thanks for discussing with me.
    I have numerous family and friends which will be intrigued, most definitely
    I’ll send it along directly to them.

  8. 8 Read More says:
    Mar 02, 2013 at 8:06 pm

    I’m really impressed with your writing skills and also with the layout on your weblog. Is this a paid theme or did you modify it yourself? Either way keep up the excellent quality writing, it is rare to see a great blog like this one nowadays.

    My website: Read More

  9. 9 yamaha filano new says:
    Apr 21, 2013 at 5:00 am

    That is a very good tip especially to those new to the blogosphere.
    Brief but very accurate information… Many thanks for sharing
    this one. A must read post!

  10. 10 Minna says:
    Apr 29, 2013 at 3:18 pm

    Howdy Now i’m so excited I stubled onto your blog -, I seriously found you by mistake, while I was researching on Bing for something more important entirely, Anyways We are here now and is likely to like to say kudos for one marvelous post or a all over thrilling blog (In addition, i love the theme/design), I would not have the time to check out just about everything inside the moment however have bookmarked it in addition to included your Nourishes, if I’vе got time ӏ’m backup in read additional, Remember to preserve the excellent work.

  11. 11 Fiona says:
    May 03, 2013 at 2:49 am

    I’d always wish to be update on new content using this type of website, saved to bookmarks! .

  12. 12 plr connecticut says:
    May 27, 2013 at 11:48 pm

    High in the article quality is easily achieved with PLR. • It does save your money because of the numerous articles for your nice at
    a cost. A newer way to use private label rights articles is to convert them into a slideshow
    made with Microsoft Power – Point that is recorded as you read it.

  13. 13 phen375 in south africa says:
    Jun 03, 2013 at 2:32 pm

    This is so because it is a supplement and not an ethical drug.

    5 could not do: Phen375 assists the body break down fatty tissue and even
    reduce its ability to store fat. The other function of Capsaicin is to
    trigger Thermogenesis.

  14. 14 flower garden tips and techniques says:
    Jun 05, 2013 at 1:58 am

    Greenhouses can also be built using landscape gardening and
    they can be incorporated inside of the garden collectively with
    a chilly-body. While a love of plants or nature inspires cottage and Asian gardens, formal garden designs express the humanistic value of people as the center of the cosmos.
    This is important because you will save a ton of money and you also keep chemicals out of your garden that may cause damage in the long run.

  15. 15 paleo diet review says:
    Jun 06, 2013 at 11:02 pm

    Paleo foods include low fat proteins and healthy fats and this always seems like an irony when
    cavemen then had life span of 25 years but then they never died because of heart attack, high blood pressure or diabetes.

    Current health-related scientific studies bear out the
    effectiveness and security of low-carbohydrate diet programs.

    The soy allergy can extend to other foods in the legume family.

  16. 16 mobile Phone radiation sar says:
    Jun 09, 2013 at 12:04 am

    First, and naturally, the exposure comes in direct contact with the head and ear area.
    Mother-to-be can keep far enough distance with cell phones.
    To back up these findings a team of 31 scientists form 14 countries
    found enough proof from the evidence compiled to honestly categorize personal exposure as possibly being very carcinogenic to humans.

  17. 17 acid reflux yeast infection says:
    Jul 06, 2013 at 6:01 am

    Burning Sensation in the Chest – chest pain is characterized by
    the feeling that your food could not move from
    behind your breastbone. The danger from reflux disease is the constant exposure of the esophagus to stomach acid.
    Heartburn – this is the main symptom of acid reflux or GERD.

  18. 18 Y8 Girl says:
    Jul 08, 2013 at 9:01 pm

    Wow! After all I got a blog from where I know how to genuinely take
    valuable facts regarding my study and knowledge.

  19. 19 teeth whitening while pregnant says:
    Aug 07, 2013 at 4:43 am

    It’s genuinely very difficult in this busy life to listen news on TV, thus I only use internet for that reason, and obtain the latest information.

  20. 20 Heather says:
    Oct 22, 2013 at 4:59 pm

    This is exactly the second article, of your blog I really read through.
    Nevertheless I personally love this 1, “Create a Sleek CSS3 Button Under
    a Minute | DevMoose” the best. Regards ,Christine

  21. 21 pregnancy miracle method free download says:
    Dec 10, 2013 at 1:17 am

    When a woman is pregnant, there may be some weight gain. The
    answer to this question is that regular menstrual
    cycles do not occur during pregnancy, but bleeding in early
    pregnancy can mean a failure of miscarriage. All in all, pregnancy is an amazing, not so amazing, and
    mysterious experience.

  22. 22 Terence says:
    Dec 11, 2013 at 1:05 pm

    It is not a easy task to discover the proper one and
    I read a lot of reviews . 5. Mmmm.

  23. 23 1 says:
    Dec 11, 2013 at 1:48 pm

    Quality service from companies like ours means a willingness to meet your specific needs to
    cross the t’s and to dot the i’s, minimizing the overall time and effort involved in this process.
    Insurance is of prime important and most of the worldwide shipping companies provide
    insurance for goods during transit. First, have
    brick-and-mortar store owners really been moaning and whining about being used unfairly as nothing more than show windows for Internet vendors, the way legislators claim.

  24. 24 bleacherreport.com says:
    Dec 14, 2013 at 5:31 am

    To receive updated news and information, click above to Subcribe
    to this Examiner or follow on TWITTER @beautyasdesign.
    Surefire cost cutting stategies for your company to
    reduce Freight and Parcel Cost. When you compare their
    rates with other parcel services, maybe they are trying too hard.

  25. 25 Elmo says:
    Dec 14, 2013 at 5:48 am

    Quality service from companies like ours means a willingness to meet your specific needs to cross the t’s and to dot the i’s, minimizing the overall
    time and effort involved in this process. It is also important to
    understand the details of insurance to save your company from unnecessary
    damages. After this it is important that you pick out
    some of the auto shippers which suit the concerning services provided to you, it is important that you look in for the companies that offer you
    with the required type of services.

  26. 26 brumby fulfilment solutions says:
    Dec 25, 2013 at 6:39 am

    Researching and preparing for any contingency involving shipping can help increase business owner’s sales and reduce time consuming problems.
    Gain comprehensive knowledge about various shipping terminologies.
    Then you have to understand the ways that you will be able to ensure you get the cheap vehicle shipping
    that you have been looking for.

  27. 27 rediff.com says:
    May 13, 2014 at 11:45 am

    Your dog should not feel uncomfortable wearing them. One of the most common and easiest ways to use rubbing alcohol
    is to clean surfaces with it. Since you have a lot of ranges and a lot of types of costumes
    that are made of dissimilar materials, you should be prepared to spend substantial time for buying them.

Leave a Comment