console
<button>进入平台</button>
<button class="normal">进入平台</button>
body{background:
button {
width: 100px;
text-align: center;
background:transparent;
background-image: linear-gradient(180deg, rgba(0,102,255,0.50) 0%, rgba(0,102,255,0.40) 50%, rgba(0,102,255,0.20) 50%, rgba(0,102,255,0.20) 100%);
color:#CCEEFF;
border-radius:0px;
font-size:15px;
padding: 9px;
box-sizing:content-box;
border:1px transparent solid;
border-image: linear-gradient(to right, rgba(0,102,255,0.2),rgba(57, 149, 255,1),rgba(0,102,255,0.2))1 5 10;
outline: none;
position: relative;
}
button:after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 14px;
bottom: -7px;
background-image: radial-gradient(ellipse closest-side, rgba(0,102,255,0.50) 0%, rgba(0,102,255,0.00) 100%);
}
button:hover {
background-image: linear-gradient(180deg, rgba(102,255,255,0.50) 0%, rgba(102,255,255,0.40) 50%, rgba(0,255,255,0.15) 50%, rgba(0,255,255,0.15) 100%);
color:
border-image: linear-gradient(to right, rgba(0,255,255,0.20),
}
button:hover:after {
background-image: radial-gradient(ellipse closest-side, rgba(0,255,255,0.30) 0%, rgba(0,255,255,0.00) 100%);
}
button.normal {
background-image: linear-gradient(180deg, rgba(204,238,255,0.30) 0%, rgba(204,238,255,0.30) 50%, rgba(204,238,255,0.15) 50%, rgba(204,238,255,0.15) 100%);
border-image: linear-gradient(to right, rgba(204,238,255,0.15),rgba(204,238,255,0.5),rgba(204,238,255,0.15))1 5 10;
}
button.normal:after {
background-image: radial-gradient(ellipse closest-side, rgba(204,238,255,0.20) 50%, rgba(204,238,255,0.00) 100%);
}
button.normal:hover {
background-image: linear-gradient(180deg, rgba(102,255,255,0.50) 0%, rgba(102,255,255,0.40) 50%, rgba(0,255,255,0.15) 50%, rgba(0,255,255,0.15) 100%);
color:
border-image: linear-gradient(to right, rgba(0,255,255,0.20),
}
button.normal:hover:after {
background-image: radial-gradient(ellipse closest-side, rgba(0,255,255,0.30) 0%, rgba(0,255,255,0.00) 100%);
}