jQuery: Custom Button with Div and CSS
May 1st, 2009 by jeremychoneHtml code:
<div class="button">My Custom Button</div>
CSS code:
/*** .button ***/
.button{
display: inline;
border: solid 1px #999999;
border-top-color: #ffffff;
border-left-color: #ffffff;
background-color: #f4f4f4;
padding: 3px;
cursor: pointer;
}
.button.down{
border-top-color: #999999;
border-right-color: #ffffff;
border-bottom-color: #ffffff;
border-left-color: #999999;
background-color: #f0f0f0;
}
/*** /.button ***/
JS code:
<script type="application/javascript">
$(document).ready(function(){
$(".button").live("mousedown",function(){
$(this).addClass("down");
}).live("mouseup",function(){
$(this).removeClass("down");
}).live("mouseout",function(){
$(this).removeClass("down");
});
});
</script>
I used “live“, but obviously, you can use “bind” as well.
See also: jQuery Live