.btn-custom { background-color: hsl(90, 43%, 72%) !important; background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e5f0da", endColorstr="#b7d698"); background-image: -khtml-gradient(linear, left top, left bottom, from(#e5f0da), to(#b7d698)); background-image: -moz-linear-gradient(top, #e5f0da, #b7d698); background-image: -ms-linear-gradient(top, #e5f0da, #b7d698); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e5f0da), color-stop(100%, #b7d698)); background-image: -webkit-linear-gradient(top, #e5f0da, #b7d698); background-image: -o-linear-gradient(top, #e5f0da, #b7d698); background-image: linear-gradient(#e5f0da, #b7d698); border-color: #b7d698 #b7d698 hsl(90, 43%, 67.5%); color: #333 !important; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.29); -webkit-font-smoothing: antialiased; } .btn-custom:hover{ background-color: blue; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <button class="btn btn-block btn-custom"> Hello World </button>
I wanted to create custom buttons in bootstrap instead of using default colors. This site does a great job of this.
However, I noticed that when I apply this css class where I want, the button color displays correctly, but the hover effect fades.
In other words: when I hover over the button, nothing happens (for example: the button does not get any lighter / darker).
Custom button style, located in the code snippet above.
And this is where I applied the style inside my rails application:
<%= link_to('Some Link', "#", class: "btn btn-block btn-custom") %>
Guidance on the link does not change the display of the button at all. I tried to add this, but this did not work:
.btn-custom:hover{ background-color: blue; }
Update after accepted answers
For some reason, in my rails project, just adding the following doesn't change the style on hover:
.btn-custom:hover{ background-color: blue; }
However, when I returned to the website that provided a custom bootstrap loading style and wrapped the css code for the desired hover color within .btn-custom:hover selector will work!
Example:
.btn-custom:hover{ background-color: hsl(76, 96%, 18%) !important; background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#d4fb69", endColorstr="#425901"); background-image: -khtml-gradient(linear, left top, left bottom, from(#d4fb69), to(#425901)); background-image: -moz-linear-gradient(top, #d4fb69, #425901); background-image: -ms-linear-gradient(top, #d4fb69, #425901); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d4fb69), color-stop(100%, #425901)); background-image: -webkit-linear-gradient(top, #d4fb69, #425901); background-image: -o-linear-gradient(top, #d4fb69, #425901); background-image: linear-gradient(#d4fb69, #425901); border-color: #425901 #425901 hsl(76, 96%, 5%); color: #fff !important; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.85); -webkit-font-smoothing: antialiased; }