Best Web Buzz

Submit button click state using CSS

Ill show you a trick using :active state in a button tag.

This is how I coded the HTML


Make sure to add the type=”submit” on your button tag to make it work on the form tag. Some people don’t use button tag because, they say it is not working for them. Well it will work this time.

active button press

            <div class=”container”>

            <form>

                        <button type=”submit”><span>submit</span></button>

            </form>

            </div>

Now back to the button active state trick,

body{
line-height:1;
margin:0;
padding:0;
text-align:center;
}
.container{
width:50%;
height:auto;
margin: 0 auto;
}

This part does the job for active button state
.container button{
display:block;
margin:0 auto;
padding:0;
width:86px;
height:41px;
border:0;
background:url(images/Untitled-1_03.jpg) no-repeat;
color:#FFFFFF;
outline:none;
}
.container button:active{
background:url(images/btn1_03.jpg) no-repeat;
outline:0;
}
.container button span {
display:block;
height:41px;
width:90%;
margin: 0 auto;
line-height:35px;
font-weight:bold;
}

Hope this helps.