JSFiddle - React, Tailwind, and code Playground

by ravimallya

HTML

<button type="submit" class="btn">Click me!</button>

CSS

.btn
{
    width:130px;
    height:45px;
    cursor:pointer;
    background: url('http://www.externalaffairs.noaa.gov/img/audio_button_sm.png') no-repeat top left, url('http://www.si87.com/images/store_version1/gradient-up.gif') repeat-x 0px 20px;
    margin:10px 10px 0;
    padding-left:38px; 
    border-radius:10px;
    font-weight:bold;
    border:1px solid #333;
    box-shadow:2px 2px 5px #333;
}
.btn:hover
{
     background:url('http://www.externalaffairs.noaa.gov/img/audio_button_sm.png') no-repeat top left;
}
.btn:active
{
    top:2px;
    position:relative;
     background:url('http://www.externalaffairs.noaa.gov/img/audio_button_sm.png') no-repeat top left;
     border:1px solid #cff;
}

JavaScript

$(function() {
    $(".btn").click(function() {
        alert("Hi there!");
    });
});