jQuery toggleClass example

Toggle class name on click in jQuery

by anoopsuda

HTML

<a class="cb-btn-outline" href="#">Click to Manage Wave Details</a>
<p>.</p>
  <button class="cb-btn-outline-cancel">Cancel</button>
  <p>.</p>
  
  <button class="cb-btn-blue">Submit Projection</button>
    
      <p>.</p>
        <button class="cb-btn-blue">Submit </button>

CSS

.cb-btn-outline {
  
border-radius: 16px;
border: 2px solid rgba(0,65,240, 1); 
background-color: rgba(245,248,255, 1);
padding:9px 16px; 
max-height:32px;
min-width:86px;
display:inline-block;  
justify-content: center;
align-items: center;
color: rgba(0,82,183,1);
font-family: "Graphik-Medium";
font-size: 11px;
font-weight: 500;
font-style: normal;
letter-spacing: -0.25px;
text-align: center;
line-height: 11px;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    text-decoration: none;
}

  
.cb-btn-outline-cancel
 {
   border-radius: 20px;
border:2px solid rgba(0,65,240, 1); 
height:40px; min-width:86px;
padding:12px 20px;  
display:flex;  
justify-content: center;
align-items: center;
color: rgba(0,65,240,1);
font-family: "Graphik-Medium";
font-size: 14px;
font-weight: 500;
font-style: normal;
letter-spacing: -0.25px;
text-align: left;
line-height: 14px;
text-decoration: none;
 } 
 .cb-btn-blue{
   border-radius: 20px;
background-color: rgba(0,65,240, 1);
padding:12px 20px;  
border:none;
height:40px; min-width:86px;
color: rgba(255,255,255,1);
font-family: "Graphik-Medium";
font-size: 14px;
font-weight: 500;
font-style: normal;
letter-spacing: -0.25px;
text-align: center;
line-height: 14px;
 }
  
.cb-btn-outline:hover, 
.cb-btn-outline-cancel:hover,
.cb-btn-blue:hover
   {box-shadow: 0 0 0 0.2rem rgba(0, 123, 255,.2);}

.cb-btn-outline:focus,  
.cb-btn-outline-cancel:focus,
.cb-btn-blue:focus
{
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255,.5);
  }