How do I make transition without affecting submit button on-click animation?

Question

I've made a button transition on hover which is fine, but when I click on the submit button now its default animation is changed to transition specified and the click feel is too slow. How do I avoid transition animation for button on-click?

• another sub-question is: How can I change the border color of input email textbox along with button hover?

nother

 .novice_btn { font-family: 'Raleway'; font-size: 11px; color: #ffffff; letter-spacing: 1px; background: #99745c; width: 80px; height: 32px; outline: none; border: 1px solid; border-color: #99745c; margin-top: 40px; margin-left: -1px; /*transition*/ -webkit-transition: all ease 0.5s; -moz-transition: all ease 0.5s; -o-transition: all ease 0.5s; -ms-transition: all ease 0.5s; transition: all ease 0.5s; } .novice_btn:hover { background: #4B301F; border-color: #4B301F; } .novice_input { font-family: 'Raleway'; font-size: 11px; color: #000000; padding: 10px; width: 400px; height: 10px; outline:none; border: 1px solid; border-color: #99745c; margin-top: 40px; } /* BORDER TEXTBOX */ .novice_btn:hover .novice_input{ border-color: #4B301F; } 

 <table height="30" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <input class="novice_input" placeholder="Email" type="text"></input> </td> <td> <input class="novice_btn" value="Send" type="submit"></input> </td> <tr> </table> 

Answer 1

In the HTML code shown you cannot select the text input because it cannot be accessed by any CSS selectors. However, this can be done through JavaScript.

Some jQuery:

$('.novice_button').mouseover(function () {
   $('.novice_input').css({'border-color': 'black'});
});
// and some code for reset styling

And for the button issue try:

.novice_button:active {
   transition: 0s;
   background-color: #4B301F;
}

If this is not what you are looking for, please comment back and I am happy to help.