CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbuttonhover
user6794472
user6794472

Reputation:

How can I make my bootstrap buttons fade when hovered

I just started using bootstrap and I created some nav buttons on my page, and they are awesome! But when you hover over the buttons, it changes to white instantly, but I want it to fade into white. I also would like it to fade back into blue once your mouse is not hovering the button anymore. How could this be done?

<!DOCTYPE html>

<html>
<head>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <title>Home</title>
</head>  
<body>
  <div class="container-fluid">
  </div>
  
    <div class="container-fluid">
       <div class="col-md-4 col-lg-4 col-sm-4 col-xs-4">
            <ul class="nav nav-pills nav-stacked" role="tablist">
                    <img src="logo.png">
                    <li class="active"><a href="home.html">Home</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="projects.html">Projects</a></li>
                    <li><a href="contact.html">Contact</a></li>        
            </ul>
      </div>
      <div class="col-md-7 col-lg-7 col-xs-7 col-sm-7 col-lg-offset-1  col-md-offset-1 col-sm-offset-1 col-xs-offset-1 main">
             <p>This is the home page.</p>
          
      </div>
        
        <footer><i class="fa fa-html5"></i> <i class="fa fa-css3"></i></footer>
    </div>
</body>
</html>

Upvotes: 1

Views: 1834

Answers (2)

AVAVT
AVAVT

Reputation: 7133

Just add CSS transition to the anchors like this snippet:

.nav-pills li a{
   /* 0.5s is the amount of time it take to change colors */
   transition: 0.5s background ease-in-out;
}
<!DOCTYPE html>

<html>
<head>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <title>Home</title>
</head>  
<body>
  <div class="container-fluid">
  </div>
  
    <div class="container-fluid">
       <div class="col-md-4 col-lg-4 col-sm-4 col-xs-4">
            <ul class="nav nav-pills nav-stacked" role="tablist">
                    <img src="logo.png">
                    <li class="active"><a href="home.html">Home</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="projects.html">Projects</a></li>
                    <li><a href="contact.html">Contact</a></li>        
            </ul>
      </div>
      <div class="col-md-7 col-lg-7 col-xs-7 col-sm-7 col-lg-offset-1  col-md-offset-1 col-sm-offset-1 col-xs-offset-1 main">
             <p>This is the home page.</p>
          
      </div>
        
        <footer><i class="fa fa-html5"></i> <i class="fa fa-css3"></i></footer>
    </div>
</body>
</html>

Upvotes: 1

Michael Coker
Michael Coker

Reputation: 53664

You want to transition the background property. You can do it with .nav a { transition: background .25s; }

<!DOCTYPE html>

<html>
<head>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <title>Home</title>
    <style>
    .nav a {
      transition: background .25s;
    }
    </style>
</head>  
<body>
  <div class="container-fluid">
  </div>
  
    <div class="container-fluid">
       <div class="col-md-4 col-lg-4 col-sm-4 col-xs-4">
            <ul class="nav nav-pills nav-stacked" role="tablist">
                    <img src="logo.png">
                    <li class="active"><a href="home.html">Home</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="projects.html">Projects</a></li>
                    <li><a href="contact.html">Contact</a></li>        
            </ul>
      </div>
      <div class="col-md-7 col-lg-7 col-xs-7 col-sm-7 col-lg-offset-1  col-md-offset-1 col-sm-offset-1 col-xs-offset-1 main">
             <p>This is the home page.</p>
          
      </div>
        
        <footer><i class="fa fa-html5"></i> <i class="fa fa-css3"></i></footer>
    </div>
</body>
</html>

Upvotes: 0

Related Questions