change opacity on hover bootstrap

Question

<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

I am using twitter bootstrap. So I reference the CSS file on top my html page `` — marc, Jul 22 '16 at 04:38
Where is you closing tag? Make proper button first http://getbootstrap.com/css/#buttons — Vishal Panara, Jul 22 '16 at 04:39

score 3 · Accepted Answer · answered Jul 22 '16 at 04:43

3

.btn-link:hover{
    opacity: 0.5;
}

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

answered Jul 22 '16 at 04:43

Vishal Panara

746
4
19

no you can't, Refer http://stackoverflow.com/questions/1033156/how-to-write-ahover-in-inline-css – Vishal Panara Jul 22 '16 at 04:50

score 2 · Answer 2 · answered Jul 22 '16 at 04:41

2

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 */
}

answered Jul 22 '16 at 04:41

JQluv

244
1
6

I would make sure to have the filter for IE8 and earlier you want to make sure to keep browser compatibility. – JQluv Jul 22 '16 at 04:45

score 1 · Answer 3 · answered Jul 22 '16 at 04:41

1

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!

answered Jul 22 '16 at 04:41

Hyein Yoo

11
1

is there a way to do this inline ? – marc Jul 22 '16 at 04:47

score 1 · Answer 4 · answered Jul 22 '16 at 08:55

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>

change opacity on hover bootstrap

4 Answers4