#click_me {
    padding: 15px 25px;
    border: unset;
    border-radius: 15px;
    color: #212121;
    z-index: 1;
    background: black;
    position: relative;
    font-weight: 1000;
    font-size: 17px;
    -webkit-box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
    box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
    transition: all 250ms;
    overflow: hidden;
   }
   
   #click_me::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    border-radius: 15px;
    background-color: #212121;
    z-index: -1;
    -webkit-box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
    box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
    transition: all 250ms
   }
   
   #click_me:hover {
    color: #e8e8e8;
   }
   
   #click_me:hover::before {
    width: 100%;
   }
 
   .luminous_color_nav  {
    position: relative;
    padding: 1em 1.8em;
    outline: none;
    border: 1px solid #303030;
    background:black;
    color: #ff7235;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 15px;
    overflow: hidden;
    transition: 0.2s;
    border-radius: 20px;
    cursor: pointer;
    font-weight: bold;
   }
  .luminous_color_nav:hover {
    box-shadow: 0 0 10px #ff7235, 0 0 25px #ff7235, 0 0 50px #ff7235;
    transition-delay: 0.6s;
   }
   
   .luminous_color_nav:active {
    background:#ff7235;
    background: linear-gradient(to top right, #ff7235,#ff7235);
    color: #ff7235;
    box-shadow: 0 0 8px #ff7235, 0 0 8px #ff7235, 0 0 8px #ff7235;
    transition: 0.1s;
   }
   .click_me {
    border: none;
    font-family: sans-serif;
    font-size: 17px;
    background: transparent;
    color: #006bb3;
    border: solid 1px rgba(0, 107, 179, 0.2);
    padding: 10px;
    border-radius: 4px;
    transition-duration: 0.2s;
   }
   
   .click_me:before {
    content: "»";
    opacity: 0;
    margin-left: -15px;
    transition-duration: 0.2s;
   }
   
   .click_me:hover:before {
    margin-left: 0px;
    opacity: 1;
   }
   
   .click_me:hover {
    color: var(--secondary-color);
    background: rgba(0, 0, 0, 0.02);
    border: solid 1px gainsboro;
   }
   .luminous_color  {
    position: relative;
    padding: 1em 1.8em;
    outline: none;
    border: 1px solid #303030;
    background: black;
    color: #001eff;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 15px;
    overflow: hidden;
    transition: 0.2s;
    border-radius: 20px;
    cursor: pointer;
    font-weight: bold;
   }
   
   .luminous_color:hover {
    box-shadow: 0 0 10px #001eff, 0 0 25px #001eff, 0 0 50px #001eff;
    transition-delay: 0.6s;
   }
   
   .luminous_color:active {
    background: #001eff;
    background: linear-gradient(to top right, #001eff, #001eff);
    color: #001eff;
    box-shadow: 0 0 8px #001eff, 0 0 8px #001eff, 0 0 8px #001eff;
    transition: 0.1s;
   }