#   
## Overview
The **cascading style sheet**, when combined properly, can create effects that seem like they have been combined with a JavaScript script, which is well-known for creating such effects.

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.

## Step 1
We will create our `html` markup. In this markup, we will have two button with the class names `fadingout` and `fadingin`. These buttons will have an `<h3>` tag directly above them, which will contain informative text.
Our markup
```
<h3> This fades, Both in and out</h3>
<div class="container">
<button class="fadingout" >Fades</button>
<button class="fadingin" >Fades</button>
</div>
```

## Step 2
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.

## Code example 
Inside the following demonstration code, we will see everything that has been explained so far brought together to create the fade effects.


<html>
 <head>
 </head>
 <body>
    <h3> Hover You cursor over Buttons to see effect</h3>
    <div class="container">
    <button class="fadingin">FadesIn</button>
    <button class="fadingout">FadesOut</button>
    </div>

   <div id="content"/>
 </body>
</html>


.fadingin{
background-color: #1da106;
  border: none;
  color: white;
  padding: 20px 36px;
  text-align: center;
  font-size: 20px;
  margin: 6px 10px 4px 10px;
  opacity: 1;
  transition: 0.2s;
}

.fadingout{
 background-color: #1e65f4;
  border: none;
  color: white;
  padding: 20px 36px;
  text-align: center;
  font-size: 20px;
  margin: 6px 6px 4px 10px;
  opacity: 0.4;
  transition: 0.3s;
}


.fadingin:hover{
    opacity: 0.4;
}
.fadingout:hover{
opacity: 1;

}
.container{
 display: flex;
 justify-content: center;
 align-items: center;
}
h3{
  position: relative;
  left: 20%;
}


codemirror

We also use this technology to fade out a button that we don't want to be active at a particular time. 

#   
## Overview
The **cascading style sheet**, when combined properly, can create effects that seem like they have been combined with a JavaScript script, which is well-known for creating such effects.

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.

## Step 1
We will create our `html` markup. In this markup, we will have two button with the class names `fadingout` and `fadingin`. These buttons will have an `<h3>` tag directly above them, which will contain informative text.
Our markup
```
<h3> This fades, Both in and out</h3>
<div>
<button >Fades</button>
<button >Fades</button>
</div>
```

## Step 2
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.

## Code example 
Inside the following demonstration code, we will see everything that has been explained so far brought together to create the fade effects.


How to create a fade-in and fade-out effect on buttons using css

 Overview The cascading style sheet, when combined properly, can create effects that seem like they have been combined with a JavaScript script, which is well-known for creating such effects. 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. Step 1 We will create our html markup. In this markup, we will have two button with the class names fadingout and fadingin. These buttons will have an  tag directly above them, which will contain informative text. Our markup  This fades, Both in and out  Fades Fades   Step 2 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. Code example Inside the following demonstration code, we will see everything that has been explained so far brought together to create the fade effects. 