JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<a style="display: inline-block;margin: 8px;" target="_blank" href="">
    <div class="btn-href-youtube"><div class="div-over-text">КНОПКА</div></div>
  </a>

CSS

.btn-href-youtube {
    position: relative;
    z-index: 1;
    padding: 10px 10px;
    font-size: 14px;
    display: flex;
    align-items: center;
  background-color: #fa5421;
    text-shadow: 0px 3px 5px rgba(0,0,0, 0.30) !important;
    box-shadow: 0 0 100px rgba(250,142,36, 0.45) !important;
    background-image: -moz-linear-gradient(45deg, #fa8127 0%, #fcc32c 100%); 
    background-image: -webkit-linear-gradient(45deg, #fa8127 0%,#fcc32c 100%);
    background-image: linear-gradient(45deg, #fa8127 0%,#fcc32c 100%);
}
.btn-href-youtube::after {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    content: "";
    height: 100%;
    width: 100%;
    background-color: #fa5421;
    box-shadow: 0 0 100px rgba(250,142,36, 0.85) !important;
    background-image: -moz-linear-gradient(45deg, #fa5421 0%, #fe871d 100%);
    background-image: -webkit-linear-gradient(45deg, #fa5421 0%,#fe871d 100%);
    background-image: linear-gradient(45deg, #fa5421 0%,#fe871d 100%);
    opacity: 0;
    transition: 0.5s ease-in-out;
}
.div-over-text {
    position: relative;
    z-index: 3;
}
 
.btn-href-youtube:hover::after {
  opacity: 1;
}