button transition toggle back and forth using CSS or JS

Question

I would like to create a button that toggles back and forth between two states on click. Currently the first click transitions the button successfully to the second state, but I cannot get the button to transition back to the original state on the second click.

Here is my code:

 $('.popup_contact').on('click', function() { $(this).toggleClass('active'); }); 

 .popup_contact { display: inline-block; min-height: 50px; height: auto !important; width: 100px; padding-top: 5px; text-align: center; font-size: 20px; font-weight: 800; background: #e8eaed; border: none; border-radius: 10px; color: #424e65 !important; -webkit-transform: perspective(0px) translateZ(0); transform: perspective(0px) translateZ(0); -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .popup_contact:before { font-family: FontAwesome; content: '\\f00d'; color: #fff; padding-top: 15px; border-radius: 10px; position: absolute; text-align: center; z-index: 1; top: 0; left: 0; right: 0; bottom: 0; background: #424e65; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .popup_contact:hover, .popup_contact:focus, .popup_contact:active { color: #424e65 !important; cursor: pointer; border: none; background: #e8eaed; outline: 0 !important; } .popup_contact:focus:before, .popup_contact:active:before { -webkit-transform: scaleX(1); transform: scaleX(1); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" /> <button class="popup_contact" style="vertical-align:middle"><span><i class="fa fa-fighter-jet" aria-hidden="true"></i> </span> </button> 

Answer 1

This is because focus and active event is applied:

.popup_contact:focus:before,
.popup_contact:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

Instead of this you should use:

.popup_contact.active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

and you can now toggle it. Cheers!

 $('.popup_contact').on('click', function() { $(this).toggleClass('active'); }); 

 .popup_contact { display: inline-block; min-height: 50px; height: auto !important; width: 100px; padding-top: 5px; text-align: center; font-size: 20px; font-weight: 800; background: #e8eaed; border: none; border-radius: 10px; color: #424e65 !important; -webkit-transform: perspective(0px) translateZ(0); transform: perspective(0px) translateZ(0); -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .popup_contact:before { font-family: FontAwesome; content: '\\f00d'; color: #fff; padding-top: 15px; border-radius: 10px; position: absolute; text-align: center; z-index: 1; top: 0; left: 0; right: 0; bottom: 0; background: #424e65; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .popup_contact:hover, .popup_contact:focus, .popup_contact:active { color: #424e65 !important; cursor: pointer; border: none; background: #e8eaed; outline: 0 !important; } .popup_contact.active:before { -webkit-transform: scaleX(1); transform: scaleX(1); } 

 <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <div> <button class="popup_contact" style="vertical-align:middle"><span><i class="fa fa-fighter-jet" aria-hidden="true"></i> </span> </button> </div> 

Answer 2

Assuming you want your button to be static until clicked (ie no change on hover also), you need to change your CSS clases from:

.popup_contact:hover,
.popup_contact:focus,
.popup_contact:active {
  ...
}
.popup_contact:focus:before,
.popup_contact:active:before {
  ...
}

To:

.popup_contact.active {
  ...
}

.popup_contact.active:before {
  ...
}

Currently, you're targeting the various psuedo states, whereas your JavaScript is adding a class.

Answer 3

You need the class .active to be in your CSS, see Snippet

SNIPPET

 $('.popup_contact').on('click', function() { $(this).toggleClass('active'); }); 

 .popup_contact { display: inline-block; min-height: 50px; height: auto !important; width: 100px; padding-top: 5px; text-align: center; font-size: 20px; font-weight: 800; background: #e8eaed; border: none; border-radius: 10px; color: #424e65 !important; -webkit-transform: perspective(0px) translateZ(0); transform: perspective(0px) translateZ(0); -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; outline: none; } .popup_contact:before { font-family: FontAwesome; content: '\\f00d'; color: #fff; padding-top: 15px; border-radius: 10px; position: absolute; text-align: center; z-index: 1; top: 0; left: 0; right: 0; bottom: 0; background: #424e65; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .popup_contact.active:hover, .popup_contact.active:focus, .popup_contact.active:active { color: #42465 !important; cursor: pointer; border: none; background: #e8eaed; } .popup_contact.active:focus:before, .popup_contact.active:active:before { -webkit-transform: scaleX(1); transform: scaleX(1); } 

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> </head> <body> <button class="popup_contact" style="vertical-align:middle"><i class="fa fa-fighter-jet" aria-hidden="true"></i><span> </span> </button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </body> </html> 

Answer 4

Your CSS doesnt have the .active class.

Try add this to your CSS:

.active {
border: 5px solid green;
}

This should add a green border when active.