html设置圆形按钮颜色,CSS3 带径向渐变背景色的圆形按钮

CSS

语言：

CSSSCSS

确定

body {

height: 100vh;

width: 100vw;

margin: 0;

}

#body {

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-webkit-flex-direction: column;

-ms-flex-direction: column;

flex-direction: column;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-justify-content: space-around;

-ms-flex-pack: distribute;

justify-content: space-around;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

width: 100%;

height: 100%;

background: -webkit-radial-gradient(ellipse farthest-corner at 45px 45px, #433043 0%, #2d1745 80%, #2d1745 500%);

background: radial-gradient(ellipse farthest-corner at 45px 45px, #433043 0%, #2d1745 80%, #2d1745 500%);

}

#circ:nth-of-type(1) {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

border: 5px solid #00b9ec;

color: #00b9ec;

font-size: 64px;

font-weight: 700;

font-family: 'Nunito', sans-serif;

background: #fff;

width: 75px;

height: 75px;

border-radius: 50%;

box-shadow: 0 0 200px #00b9ec, 0 0 300px #1dfcf7;

}

#circ:nth-of-type(1) img {

height: 44px;

text-shadow: 0 0 75px #00b9ec;

}

#circ:nth-of-type(2) {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

border: 5px solid #f05505;

color: #f05505;

font-size: 64px;

font-weight: 700;

font-family: 'Nunito', sans-serif;

background: #fff;

width: 75px;

height: 75px;

border-radius: 50%;

box-shadow: 0 0 200px #f05505, 0 0 300px #f05505;

}

#circ:nth-of-type(2) img {

height: 42px;

text-shadow: 0 0 75px #f05505;

}

#circ:nth-of-type(3) {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

border: 5px solid #cbec1d;

color: #cbec1d;

font-size: 64px;

font-weight: 700;

font-family: 'Nunito', sans-serif;

background: #fff;

width: 75px;

height: 75px;

border-radius: 50%;

box-shadow: 0 0 200px #cbec1d, 0 0 300px #cbec1d;

}

#circ:nth-of-type(3) img {

height: 44px;

text-shadow: 0 0 75px #cbec1d;

}