I have created some visually appealing buttons that I am satisfied with, but when a user clicks on one, the text color changes and the button's hover behavior is altered. I utilized this generator to design the buttons:
Below is the CSS code for my buttons:
.btn-custom-primary {
// Button styling properties
}
Here is an example of how the button functions within a form using submit_tag:
<%= submit_tag 'Login', :class => "btn btn-custom-primary login-button" %>
And here is an instance of a problematic button:
<%= link_to "Sign up", new_user_path, :class => "btn btn-custom-primary signup-button" %>
The extra class added to each button is mainly for spacing purposes:
.login-button, .create-account-button, .signup-button {
margin-left: 5px;
float: left;
}
I've noticed that this issue occurs not only with previously clicked links, but also with all non-submit_tag buttons.
In addition, my navbar-collapse button exhibits similar behavior by changing to match the navbar color:
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
When hovering over a button that has already been clicked, it appears like this:
My desired appearance for the button during hover is as follows: