DIV Button

jQuery to turn a DIV into a button.

HTML

<div class="button" data-message="This is the message tied to the button">CLICK ME</div>

CSS

.button {
    width: 50px;
    height: 25px;
    border: 1px solid #000000;
    text-align:center;
    margin:10px;

    line-height: 50px;
    cursor: pointer;
    background: #D4D9E9;
}

.button.hovered {
    background-color: #ABBAE8;
}

JavaScript

$('.button')
    .click(function() {
        $(this).css('background-color','red');            
        alert( $(this).data('message') );
    })
    .hover(
        function() { $(this).toggleClass('hovered') }
    );