Our Featured Articles:
1 2 3 4 5 6 7 8 9 10
Smooth Slider

How to Create a CSS3 Buttons Using HTML5

July 10, 2012 LarryMark HTML

Post to Twitter

In this tutorial we will be creating a CSS3 Buttons using HTML5

Actually in creating a button in CSS3 is the most easiest way than creating a button using the Adobe Photoshop in a short coding you will be able to create a clean and a good quality button using the CSS3 with HTML5. A html5 is the next revolutions of html markup language that is a new trend in html programming, most of the browser nowadays has a full support for html5 architecture, or if not then a partial support is a must. HTML5 is a markup language originally proposed by Opera Software. HTML5 soon to be the widely used html markup language in the web, it has different sets of tags that is not available from other versions of html,as it offers widely varieties of features that is applicable from its predecessors like HTML 4.01, In this article I will showing you on how to use a basic HTML5 programming.

Step 1- HTML5

create an html file and save it as index.html
we will be creating a 3 anchor tags using HTML5 and a different color with CSS3 Class Indicated
<!doctype html>
<html>
   <head>
     <meta charset="utf-8">
     <title>CSS3 Button</title>
   </head>
   <body>
     <a href="#" class="mybutton green">Green</a>
     <a href="#" class="mybutton red">Red</a>
     <a href="#" class="mybutton yellow">Yellow</a>
   </body>
</html>

the preview of the source code will be like this :

well as we can see the plain HTML5 with no CSS3 included looks crappy in design

Step 2 – Basic CSS3 Style Coding

At this point we will be creating a basic CSS3 style sheet to fill the HTML5 with good quality design in Step 1 we included the class name of each certain anchor tags with different CSS3 class colors.
in this type of CSS3 and HTML5 button we will include the box shadow to create a backshadow in CSS3 button

<!doctype html>
<html>
  <head>
   <meta charset="utf-8">
   <title>CSS3 Button</title>
   <style>
      .mybutton {
        display: inline-block;
        position: relative;
        margin: 10px;
        padding: 0 20px;
        text-align: center;
        text-decoration: none;
        font: bold 12px/25px Arial, sans-serif;
        box-shadow:#000 4px 4px 5px;
      }
      /* GREEN */
     .green {
        color: #3e5706;
        background: #a5cd4e;
     }
     /* RED */
     .red {
        color: #19667d;
        background: #F00;
     }
    /* Yellow Color */
     .yellow {
        color: #515151;
        background: #FF0;
     }
   </style>
 </head>
   <body>
     <a href="#" class="mybutton green">Green</a>
     <a href="#" class="mybutton red">Red</a>
     <a href="#" class="mybutton yellow">Yellow</a>
   </body>
</html>

the preview of the source code will be like this :

 

VN:F [1.9.6_1107]
Rating: 10.0/10 (4 votes cast)
VN:F [1.9.6_1107]
Rating: +4 (from 4 votes)
How to Create a CSS3 Buttons Using HTML5, 10.0 out of 10 based on 4 ratings

Post to Twitter

Keywords: , , , , ,

You might be also interested to read these articles:

CSS3, html, html5, programming, style sheet,

Leave a Reply

Your email address will not be published. Required fields are marked *

*

9,956 Spam Comments Blocked so far by Spam Free Wordpress

HTML tags are not allowed.

Copyright © 2010-2013 | SourceHints | Term and Conditions | Sitemap | PageRank

Powered by WordPress 3.5.1. Designed by elogi. Allright Reserved SourceHints 2010-2013