Hover problem on Bootstrap button

[LGMTL]

I have a boostrap button that when I mouseover the button slowly it first changes the background color of the button (text color remains same) then when I hover over the text it changes text color.  I was wondering if it's possible to have both the text and background change at the same time and not individually like the PDF icon on the button?

These are the buttons on the middle of the page: http://prntscr.com/fqhbmb

Link:  Supreme - GALAXY CLEAN FACE

CSS: [PHP] @charset "utf-8";  @import url("../webfonts/SourceSansPro_Regular/stylesheet.css - Pastebin.co...

Markup: [PHP] <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" con - Pastebin.com

I would just like the text to change to White on hover over any part of the button and not just over the text. 

Thanks for your help!

Brandon

[osgood_ · Accepted solution]

Yes you can do that. Its yet another  'making you jump through hoops' Bootstrap feature:

.btn-default:hover > a {

color: #fff!important;

}

in normal circumstances (writing you own code) this simple logical css would work but not in Bootstrap:

.btn-default a:hover  {

color: #fff;

}

[LGMTL]

Perfect! thanks Osgood.

Brandon

[osgood_]

brandonw6890098  wrote

Perfect! thanks Osgood.

Brandon

Glad it works.

Its looking to be a hugley nice website visually but coding wise not so much. I can tell you are a designer BUT not a coder.

Youre repeating a lot of stuff, are you using includes which could be the result of why so much is being repeated?

For instance all the below at line 51:

<link rel="stylesheet" type="text/css" href="css/jquery.fancybox.min.css">

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

<!-- Latest compiled and minified CSS -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.smartmenus/1.0.1/addons/bootstrap/jquery.smartmenus.bo..." rel="stylesheet" type="text/css">

<link href="css/mystyles.css" rel="stylesheet" type="text/css">

You have these links inserted about 3 times:

   <!-- SmartMenus jQuery plugin -->

   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.smartmenus/1.0.1/jquery.smartmenus.js"></script>

   <!-- SmartMenus jQuery Bootstrap Addon -->

   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.smartmenus/1.0.1/addons/bootstrap/jquery.smartmenus.bo..."></script>

You have the below links at line 454 which I think are repeated at the top of the page:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="container-fluid container-footer"><meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">

<link href="css/mystyles.css" rel="stylesheet" type="text/css">

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

[Nancy OShea]

Bootstrap buttons  typically change background by default.  But depending on the Theme you're using, the change might be too subtle for you.

As an example:

<button type="button" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#myModal">CLICK HERE</button>

Or

<a href class="btn btn-sm btn-primary" src="my_awesome.pdf">PDF LINK</a>