/*
    
    INSTRUCTIONS

    Using CSS properties alone, recreate this button: 

        https://i.imgur.com/gnZnY.png. 

    Spend no longer than 15 minutes on it, we don't 
    expect it to be a perfect match. It's open book, 
    feel free to hit Google but be prepared to 
    explain your solution.
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap');
https://fonts.googleapis.com/css2?family=Courgette&display=swap
*/
@import url('https://fonts.googleapis.com/css2?family=Courgette&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    font-family: 'Courgette', sans-serif;
}
.butt_ani{
  padding: 10px 10px;
  background-color: #050801;
  color: #4EFF6E;
  font-weight: bold;
  border: none;
  border-radius: 5px;
  letter-spacing: 4px;
  overflow: hidden;
  transition: 0.5s;
  cursor: pointer;
}
.butt_ani:hover{
    background: #4EFF6E;
    color: #050801;
    box-shadow: 0 0 5px #4EFF6E,
                0 0 25px #4EFF6E,
                0 0 50px #4EFF6E,
                0 0 200px #4EFF6E;
     -webkit-box-reflect:below 1px linear-gradient(transparent, #0005);
}
.butt_fan{
  padding: 10px 10px;
  background-color: #050801;
  color: #99835D;
  font-weight: bold;
  border: none;
  border-radius: 5px;
  letter-spacing: 4px;
  overflow: hidden;
  transition: 0.5s;
  cursor: pointer;
}
.butt_fan:hover{
    background: #99835D;
    color: #050801;
    box-shadow: 0 0 5px #99835D,
                0 0 25px #99835D,
                0 0 50px #99835D,
                0 0 200px #99835D;
     -webkit-box-reflect:below 1px linear-gradient(transparent, #0005);
}
.butt_pin{
  padding: 10px 10px;
  background-color: #050801;
  color: #FF86FA;
  font-weight: bold;
  border: none;
  border-radius: 5px;
  letter-spacing: 4px;
  overflow: hidden;
  transition: 0.5s;
  cursor: pointer;
}
.butt_pin:hover{
    background: #FF86FA;
    color: #050801;
    box-shadow: 0 0 5px #FF86FA,
                0 0 25px #FF86FA,
                0 0 50px #FF86FA,
                0 0 200px #FF86FA;
     -webkit-box-reflect:below 1px linear-gradient(transparent, #0005);
}
.butt_aut{
  padding: 10px 10px;
  background-color: #050801;
  color: #A55AFF;
  font-weight: bold;
  border: none;
  border-radius: 5px;
  letter-spacing: 4px;
  overflow: hidden;
  transition: 0.5s;
  cursor: pointer;
}
.butt_aut:hover{
    background: #A55AFF;
    color: #050801;
    box-shadow: 0 0 5px #A55AFF,
                0 0 25px #A55AFF,
                0 0 50px #A55AFF,
                0 0 200px #A55AFF;
     -webkit-box-reflect:below 1px linear-gradient(transparent, #0005);
}
.butt_link{
  padding: 10px 10px;
  background-color: #050801;
  color: #CACACA;
  font-weight: bold;
  border: none;
  border-radius: 5px;
  letter-spacing: 4px;
  overflow: hidden;
  transition: 0.5s;
  cursor: pointer;
}
.butt_link:hover{
    background: #CACACA;
    color: #050801;
    box-shadow: 0 0 5px #CACACA,
                0 0 25px #CACACA,
                0 0 50px #CACACA,
                0 0 200px #CACACA;
     -webkit-box-reflect:below 1px linear-gradient(transparent, #0005);
}
.butt_inf{
  padding: 10px 10px;
  background-color: #050801;
  color: #F4C503;
  font-weight: bold;
  border: none;
  border-radius: 5px;
  letter-spacing: 4px;
  overflow: hidden;
  transition: 0.5s;
  cursor: pointer;
}
.butt_inf:hover{
    background: #F4C503;
    color: #050801;
    box-shadow: 0 0 5px #F4C503,
                0 0 25px #F4C503,
                0 0 50px #F4C503,
                0 0 200px #F4C503;
     -webkit-box-reflect:below 1px linear-gradient(transparent, #0005);
}
.butt_kei{
  padding: 10px 10px;
  background-color: #050801;
  color: #F40341;
  font-weight: bold;
  border: none;
  border-radius: 5px;
  letter-spacing: 4px;
  overflow: hidden;
  transition: 0.5s;
  cursor: pointer;
}
.butt_kei:hover{
    background: #F40341;
    color: #050801;
    box-shadow: 0 0 5px #F40341,
                0 0 25px #F40341,
                0 0 50px #F40341,
                0 0 200px #F40341;
     -webkit-box-reflect:below 1px linear-gradient(transparent, #0005);
}

.butt_ser{
  padding: 10px 10px;
  background-color: #050801;
  color: #03e9f4;
  font-weight: bold;
  border: none;
  border-radius: 5px;
  letter-spacing: 4px;
  overflow: hidden;
  transition: 0.5s;
  cursor: pointer;
}

.butt_ser:hover{
    background: #03e9f4;
    color: #050801;
    box-shadow: 0 0 5px #03e9f4,
                0 0 25px #03e9f4,
                0 0 50px #03e9f4,
                0 0 200px #03e9f4;
     -webkit-box-reflect:below 1px linear-gradient(transparent, #0005);
}


button{
  padding: 25px 30px;
  background-color: #050801;
  color: #03e9f4;
  font-weight: bold;
  border: none;
  border-radius: 5px;
  letter-spacing: 4px;
  overflow: hidden;
  transition: 0.5s;
  cursor: pointer;
}

button:hover{
    background: #03e9f4;
    color: #050801;
    box-shadow: 0 0 5px #03e9f4,
                0 0 25px #03e9f4,
                0 0 50px #03e9f4,
                0 0 200px #03e9f4;
     -webkit-box-reflect:below 1px linear-gradient(transparent, #0005);
}

a {
    
}
body{
  background-color: black;
}