css3颜色减淡按钮圆角

image.png

image.png

*
{
    font-family:Dosis,sans-serif;
}

.container
{
    display:flex;
    flex-wrap:wrap;
    flex-direction:column;
    justify-content:space-evenly;
    align-items:center;
    height:97vh;
}

.container h1
{
    background:linear-gradient(toright,#FEC1630%,#DE4313100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.container .button
{
    transition:all .3s ease-in-out;
}

.container .button:nth-child(2)
{
    width:150px;
    height:60px;
    border-radius:50px;
    background-image:linear-gradient(135deg,#E2B0FF0%,#9F44D3100%);
    box-shadow:0 20px 30px -6px rgba(171,88,219,0.5);
    outline:none;
    border:none;
    cursor:pointer;
    font-size:24px;
    color:#FFF;
}

.container .button:nth-child(3)
{
    width:150px;
    height:60px;
    border-radius:50px;
    background-image:linear-gradient(135deg,#81FBB80%,#28C76F100%);
    box-shadow:0 20px 30px -6px rgba(60,211,128,0.5);
    outline:none;
    border:none;
    cursor:pointer;
    font-size:24px;
    color:#FFF;
}

.container .button:nth-child(4)
{
    width:150px;
    height:60px;
    border-radius:50px;
    background-image:linear-gradient(135deg,#ABDCFF0%,#0396FF100%);
    box-shadow:0 20px 30px -6px rgba(30,161,255,0.5);
    outline:none;
    border:none;
    cursor:pointer;
    font-size:24px;
    color:#FFF;
}

.container .button:nth-child(5)
{
    width:150px;
    height:60px;
    border-radius:50px;
    background-image:linear-gradient(135deg,#FEB6920%,#EA5455100%);
    box-shadow:0 20px 30px -6px rgba(238,103,97,0.5);
    outline:none;
    border:none;
    cursor:pointer;
    font-size:24px;
    color:#FFF;
}

.container .button:hover
{
    -webkit-transform:translatey(10px);
    transform:translatey(10px);
    box-shadow:none;
}

.container .button:active
{
    opacity:0.5;
}