MyBB Community Forums

I remember seeing a tutorial where you just pasted a small amount of code in global.css, and every text (link) and button had a smooth hover effect. I've searched all over google for a while now, and no luck finding that tutorial. Does anyone know where it is, or how to do it?

what exactly the effect you are trying to do.... this should give you a basic idea: http://www.w3schools.com/cssref/sel_hover.asp

Maybe you want to hover with transitions... something like:

.button a:link, .button a:visited {
color: #FFFFFF;
background: #262626;
text-decoration: none;
transition: all 0.5s ease;
}

.button a:hover, .button a:active {
background: #565656;
transition: all 0.5s ease;
}

(2015-02-02, 06:06 PM)mmadhankumar Wrote: [ -> ]what exactly the effect you are trying to do.... this should give you a basic idea: http://www.w3schools.com/cssref/sel_hover.asp

Thanks for the link, but that's not what I'm going for. I should of explained it better, where when you hover your cursor over the text, it smoothly changes to the color you pick. I know there's a tutorial some where about it, I just can't find it :/

---

(2015-02-02, 06:13 PM)eNvy Wrote: [ -> ]Maybe you want to hover with transitions... something like:

.button a:link, .button a:visited {
color: #FFFFFF;
background: #262626;
text-decoration: none;
transition: all 0.5s ease;
}

.button a:hover, .button a:active {
background: #565656;
transition: all 0.5s ease;
}

Looking at it, it looks right. But when I add it to the global.css, it doesn't do anything

---

Here's an example of what the effect I'm aiming for http://i.gyazo.com/b295b2bad5997ca17e1b6783bbb6f87d.gif

I believe adding this into your CSS anywhere should give the effect you're looking for:

a:link {
transition: all .5s ease;
}

Alternately you could apply this to any element with a hover effect, and though I don't suggest it (Very situational) it might have a better effect that you're looking for. Fee free to try both.

* {
transition: all .5s ease;
}

(2015-02-02, 07:01 PM)Eric J. Wrote: [ -> ]I believe adding this into your CSS anywhere should give the effect you're looking for:

a:link {
transition: all .5s ease;
}

Alternately you could apply this to any element with a hover effect, and though I don't suggest it (Very situational) it might have a better effect that you're looking for. Fee free to try both.

* {
transition: all .5s ease;
}

Exactly what I was looking for! Thank you very much! (+rep)