One such effect is “the fading button effect,” which we’ll learn to create in this shot. At the end of the shot, we should be able to make a button that fades in and out when the mouse cursor goes closer or away from it.
We will create our
html markup. In this markup, we will have two button with the class names
fadingin. These buttons will have an
<h3> tag directly above them, which will contain informative text.
<h3> This fades, Both in and out</h3> <div class="container"> <button class="fadingout" >Fades</button> <button class="fadingin" >Fades</button> </div>
We will create our all-important CSS styles, which create the effect(s) we want to see.
In this style sheet, we will style the button to give it some background color, a border, a transition, and some other values.
With another set of styles, what happens to the button when the mouse pointer moves close to and away from it will be specified in order to create our fading effect.
Inside the following demonstration code, we will see everything that has been explained so far brought together to create the fade effects.
We also use this technology to fade out a button that we don’t want to be active at a particular time.
View all Courses