CODEWITHSUNDEEP
cssruby-on-railstwitter-bootstrap
Joe Essey
Joe Essey

Reputation: 3527

Keep my buttons from changing color on hover

I have very nice buttons I'm happy with, but once a user clicks one, it changes the color of the text and how the button behaves when hovered on. I used this generator to build the buttons: http://twitterbootstrapbuttons.w3masters.nl/?color=%236f7578

Here's my button css:

.btn-custom-primary {
  background-color: hsl(0, 0%, 47%) !important;
  background-repeat: repeat-x !important;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#777777", endColorstr="#777777");
  background-image: -khtml-gradient(linear, left top, left bottom, from(#777777), to(#777777));
  background-image: -moz-linear-gradient(top, #777777, #777777);
  background-image: -ms-linear-gradient(top, #777777, #777777);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #777777), color-stop(100%, #777777)) !important;
  background-image: -webkit-linear-gradient(top, #777777, #777777) !important;
  background-image: -o-linear-gradient(top, #777777, #777777) !important;
  background-image: linear-gradient(#777777, #777777) !important;
  border-color: #777777 #777777 hsl(0, 0%, 47%);
  color: #fff !important;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.00);
  -webkit-font-smoothing: antialiased;
  webkit-font-smoothing: antialiased;
}

Here's the example where the button works. It's on a submit_tag attached to a form:

 <%= submit_tag 'Login', :class => "btn btn-custom-primary login-button" %>

Here's one of the bad buttons:

<%= link_to "Sign up", new_user_path, :class => "btn btn-custom-primary signup-button" %>

The additional class for each button is just for spacing:

.login-button, .create-account-button, .signup-button {
  margin-left: 5px;
  float: left;
}

I've also learned that this is not only for links that have been clicked before, but seemingly all buttons that are not submit_tags.

Additionally, my navbar-collapse button is doing the same thing but changing to the color of the navbar:

<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

This is what the button looks like when I hover after I've clicked it once:

enter image description here

This is what I want the button to look like while I hover on it:

enter image description here

Upvotes: 0

Views: 945

Answers (1)

Andres I Perez
Andres I Perez

Reputation: 75379

The hover background you're seeing is the background-image backdrop effect bootstrap adds to the buttons to make their buttons look 3d..ish. You cab overcome this by simply removing the background-image effect in your .btn-custom-primary class, like so:

It is done through the displacement of the background-image by shifting the gradient using the background-position, which can be removed like so:

.btn-custom-primary {
    background-position: 0 center;
}

Upvotes: 1

Related Questions