styles.css

/* styles.css */
body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #000000;
  }
  
.btncarta {
    text-decoration: none;
    position: relative;
    border: none;
    font-size: 50px;
    font-family: inherit;
    cursor: pointer;
    color: #fff;
    width: 9em;
    height: 3em;
    line-height: 2em;
    text-align: center;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 300%;
    border-radius: 30px;
    z-index: 1;
    margin-right: 20px;
  }
  
  .btncarta:hover{
    animation: ani 8s linear infinite;
    border: none;
  }
  
  .btncarta:before {
    content: "";
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    z-index: -1;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
    border-radius: 35px;
    transition: 1s;
}

.btncarta:hover::before {
    filter: blur(20px);
}

.btncarta:active {
    background: linear-gradient(32deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
}

/*********************************************************/
.btnrosa {
    text-decoration: none;
    position: relative;
    border: none;
    font-size: 50px;
    font-family: inherit;
    cursor: pointer;
    color: #fff;
    width: 9em;
    height: 3em;
    line-height: 2em;
    text-align: center;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 300%;
    border-radius: 30px;
    z-index: 1;
    margin-left: 20px;
  }
  
  .btnrosa:hover{
    animation: ani 8s linear infinite;
    border: none;
  }
  
  .btnrosa:before {
    content: "";
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    z-index: -1;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
    border-radius: 35px;
    transition: 1s;
}

.btnrosa:hover::before {
    filter: blur(20px);
}

.btnrosa:active {
    background: linear-gradient(32deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
}

  @keyframes ani {
    0% {
        background-position: 0%;
    }

    100% {
        background-position: 400%;
    }
}

/********************************************************************/

  @media only screen and (min-width: 600px) {
    .menu {
      flex-direction: row;
    }
  }