body
{
    border: #2196f3;
    color:white;
    background: #031321;
}

.NeonLight
{
    border: black 2px solid;
    border-radius: 200px;
    padding:15px 30px; /*top and right padding area */
    position: relative;
    top:300px;
    right:-560px;
    
}


.NeonLight:hover
{
   
    color:white;
    animation : BallBounce 2s, NeonLight 8s;
/*     animation-delay:10s; */
}


 @keyframes BallBounce
{

    0%
    {
        border-left-color: white;
        /* transition:  border-bottom-color 20s;   */
        border-left-width:1px;
    }
   
    25%
    {
        border-top-color: white; 
        border-top-width: 1px;   
     } 

    35%
    {
        border-right-color: white;
       
       border-right-width:1px;   
    }
    
    50%
    {
           border-bottom-color: white;
           border-bottom-width:1px;
    }

    75%
    {
         border-left-color: white;
         border-left-width:1px;
     }

     100%
     {
        /* box-shadow: 0 0 20px #2196f3,0 0 40px #2196f3;/*creates the neon effect*/
        /* background-color:#2196f3;  */
        /* transition:  background-color 20s;   */
        /* transition:  box-shadow 20s;   */ 
     }

     } 
    

@keyframes NeonLight

{
    
   0%
    {
       background-color: inherit;
    }

    25%
    {
        background-color: inherit;
    }
    
   
    
    100%
    {
        background-color:#2196f3; 
        box-shadow: 0 0 20px #2196f3,0 0 40px #2196f3;
        transition:  box-shadow 4s,background-color 1s;  
       
    }


}