@font-face {
    font-family: 'main';
    src: url(fonts/samim-bold.woff  );
}

.but_wellcome a {
    position: relative;
    text-decoration: none;
    font-size: 13px;
    padding: 12px 32px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgb(255, 253, 253);
    font-family: main;
    border-radius: 15px;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(235, 215, 43, 0.301);
    
}

.but_wellcome .item {
    transition: color .1s ease-out;
    &:before {
      position: absolute;
      content: '';
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color:rgba(40, 92, 204, 0.658);
      height: 100%;
      width: 0;
      opacity: 0;
      border-radius: 15px;
      border: 1px solid transparent;
      transition: .3s all ease-out;
      z-index: -1;
    }
    &:after {
      position: absolute;
      content: '';
      width: 100%;
      height: 100%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border: 1px solid #FFF;
      opacity: 0;
      border-radius: 15px;
      transition: opacity .1s ease-out;
    }
    &:hover, &:focus {
        outline:none;
        color: #FFF;
        &:before {
            width: 100%;
            opacity: 1;
        }
        &:after {
            opacity: 1;
        }
    }
}