Sunday, January 12, 2014

Exact Age Calculator: Behind The Scene - Button With Pure CSS

Topic:
So I was trying to make the button to calculate more apparent. I thought about it for a while and was reminded of what the button in NUS ModCrasher looks like. So I tried to make that using CSS only. Apparently, I could achieve similar result!

Here is the sample code snippet:

<!DOCTYPE html>
<html>
<head>
    <style>
    #button {
        cursor: pointer;
        text-align: center;
        width: 200px;
        padding: 5px;
        margin: 10px;
        margin-left: auto;
        margin-right: auto;
        border: 1px solid #999;
        border-radius: 10px;
        background: #FFD119;
        background: -webkit-gradient(linear, left top, left bottom, from(#FFD119), to(#E6B800));
        background: -moz-linear-gradient(top, #FFD119, #E6B800);
        font-weight: bold;
        height: 28px;
        box-shadow: 0 -8px inset;
    }

    #button:hover {
        background: -webkit-gradient(linear, left top, left bottom, from(#E6B800), to(#FFD119));
        background: -moz-linear-gradient(top, #E6B800, #FFD119);
        margin-top: 13px;
        height: 25px;
        box-shadow: 0 -5px inset;
    }

    #button:active {
        background: #403300;
        padding-top: 10px;
        height: 20px;
        box-shadow: 0 5px #000 inset;
    }
    </style>
</head>
<body>
    <div id="button">This is the button</div>
</body>
</html>

To see it in action, you could go to my Codebits at http://www.codecademy.com/HansNewbie/codebits/PmVTjH.

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)