CSS 3 and HTML 5 Button

[codesyntax lang=”vbnet”]

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <style type="text/css">

                /*Button*/

                .button {

                        display: inline-block;

                        outline: none;

                        cursor: pointer;

                        text-align: center;

                        text-decoration: none;

                        font: 14px/100% Arial, Helvetica, sans-serif;

                        font-weight:bold;

                        padding: .5em 2em .55em;

                        text-shadow: 0 1px 1px rgba(0,0,0,.3);

                        -webkit-border-radius: .5em;

                        -moz-border-radius: .5em;

                        border-radius: .5em;

                        border-radius: 15px 15px 15px 15px;

                        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);

                        -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);

                        box-shadow: 0 1px 2px rgba(0,0,0,.2);

                }

                .button:hover {

                        text-decoration: none;

                }

                .button:active {

                        position: relative;

                        top: 1px;

                }

                /*Gradient*/

                .orange {

                        color: #fef4e9;

                        border: solid 1px #da7c0c;

                        background: #f78d1d;

                        background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));

                        background: -moz-linear-gradient(top,  #faa51a,  #f47a20);

                        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');

                }

                .orange:hover {

                        background: #f47c20;

                        background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));

                        background: -moz-linear-gradient(top,  #f88e11,  #f06015);

                        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');

                }

                .orange:active {

                        color: #fcd3a5;

                        background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));

                        background: -moz-linear-gradient(top,  #f47a20,  #faa51a);

                        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');

                }

    </style>

</head>

<body>

    <form id="form1" runat="server">

    <div>

    <a href="#" class="button orange">Orange</a>

    </div>

    </form>

</body>

</html>

[/codesyntax]

Author: Travis Gneiting

Passionate Professional .NET Developer