Animation button

It's good practice to make a diagram about a set of code. From beginning to end. The ins and outs. It creates a visual aspect into coding.

// animation code
<style> #custom-button{
display:inline-block;
color:white;
background-color:#29425c;
padding:10px;
font-size:30px;
border: 2px solid #29425c;
border-radius:5px;
margin:top:10px;
cursor:pointer;
box-shadow:2px 2px 5px black;
transition: box-shadow ease-in-out 0.4s
}
#custom-button:hover{
box-shadow:0px 0px 0px black;
}
 </style>





// HTML
<section>
<div class="colors">  <h8> Animation <br><br><br> 
<a id="custom-button">

  <h9>Hello World</h9>
 </a>
<h1 class="GG"> I created a simple 2D animation using <br> JavaScript and Cascating Style Sheet. <br>
Hover over the button! </h1>

</h8></div>
</section>

</section>


//GG CSS

.GG {
font-size:17px;
padding-left:10px;

}