Twitter Bootstrap Question posted in

change opacity on hover bootstrap – Twitter bootstrap

<button type="submit" value="Log in" class="btn btn-lg btn-link" style="color: grey;"><i class="glyphicon glyphicon-log-in" style="font-size: xx-large"></i></button>

I added inline style to change the button style property. Now it won’t change opacity when I hover my mouse pointer over it. Is there a way to specify that ? I am using twitter bootstrap 3.0

Tags:

4

Answers


  1. 0

    I would make my own css class that uses :hover and then set the opacity property of the html element like so:

    .btn-opacity:hover {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}
.btn-opacity {
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}
    Login or Signup to reply.
  2. 0

    You could try adding that feature in your CSS

    button:hover{
  opacity: .5;
}

    But this specifies that all buttons opacity will change to 50% when you hover and I’m not sure if that helps!

    Login or Signup to reply.
  3. 0 
    .btn-link:hover{
    opacity: 0.5;
}

    You need to add opacity to .btn-link so this will not effect all buttons in your website

    Login or Signup to reply.
  4. 0

    Inline method
    This will works for you.. 

    <button onmouseover = "this.style.opacity = '0.5'" onmouseout = "this.style.opacity = '1'" type="submit" value="Log in" class="btn btn-lg btn-link" style="color: grey;"><i class="glyphicon glyphicon-log-in" style="font-size: xx-large"></i>submit</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search