Button Click Example

Creates an input button and assigns a click event to it.

by Yogesh Patel

HTML

<button  onclick="Enrolled()" id="btnEnroll" class="exam-int-btn">Enroll</button>

CSS

.exam-int-btn {
   width: 100px;
    line-height: 2.5em;
    justify-content: center;
    padding: 0;
    font-weight: 400;
    color: #ffffff;
    background-color: #2196F3;
    text-align: center;
    border-radius: 4px;
    box-shadow: 5px 5px 15px 0 rgba(46,61,73,.15);
    transition: all .3s ease;
    border: 1px solid transparent;
    cursor: pointer;
}
.white
{
  background:#FFF;
  color:#000;
   width: 100px;
    line-height: 2.5em;
    justify-content: center;
    padding: 0;
    font-weight: 400;
   
    text-align: center;
    border-radius: 4px;
    box-shadow: 5px 5px 15px 0 rgba(46,61,73,.15);
    transition: all .3s ease;
    border: 1px solid transparent;
    cursor: pointer;
}

JavaScript

var onClick = function() {
    var btn= document.getElementById('btnEnroll');
    var className = btn.getAttribute("class");
  if(className=="exam-int-btn") {
    btn.className = "white";
  }
  else{
    btn.className = "exam-int-btn";
  }
  
};

$('#btnEnroll').click(onClick);