按钮 蓝底白字 html,使用CSS3制作的蓝底白色3D按钮

CSS

语言：

CSSSCSS

确定

body {

margin: 0;

background: #1e90ff;

height: 100vh;

display: -webkit-box;

display: -ms-flexbox;

display: box;

display: flex;

-webkit-box-pack: center;

-o-box-pack: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-align: center;

-o-box-align: center;

-ms-flex-align: center;

align-items: center;

}

button {

background-color: #fff;

border: 0;

outline: 0;

padding: 1.5rem 2rem;

font-size: 4rem;

font-family: monospace;

box-shadow: 0px 5px 10px #0057ab;

-webkit-transition: all 0.3s;

transition: all 0.3s;

cursor: pointer;

border-radius: 5px;

border-bottom: 4px solid #d9d9d9;

}

button:hover {

box-shadow: 0px 15px 25px -5px #0057ab;

-webkit-transform: scale(1.03);

transform: scale(1.03);

}

button:active {

box-shadow: 0px 4px 8px #0065c8;

-webkit-transform: scale(0.98);

transform: scale(0.98);

}