Div Button

A simple button using div element and CSS only.

by Vimla Ramdoo

HTML

<!-- Create a button with rounded corners use div element and CSS -->
<!-- Specifies callback for onclick event  -->
<!-- Note user of single and double quotes -->
<!-- The alert function is built in.       -->
<div class="divButton" onclick="alert('Button Clicked')">Click Me</div>

CSS

.divButton {
    border-radius: 10px;    /* Use rounded edge */
    cursor: pointer;        /* Use cursor pointer since clickable */
    text-align: center;     /* Center text in button */
    background-color: lightgray;
    color: black;
    padding: 5px;
    margin: 20px;
    margin-left: auto;
    margin-right: auto;
    width: 100px;
    border: 2px solid; 

}

/* Chance color when mouse is hovering */
/* over a div of class divButton */
.divButton:hover {
    background-color: white;
}