使用本次课学到的各种那个样式制作一个酷炫的按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Button</title>
<style>
#btn{
border: 1px solid blue;
font-family: monospace;
background-color: #1b3651;
background-size: 400%;
font-size: 30px;
width: 150px;
height: 100px;
text-align: center;
line-height: 50px;
border-radius: 10px;
color: #4cc9f0;
text-transform: uppercase;
transition: 1s;
}
#btn:hover{
color: white;
border: 0;
background-color: #4cc9f0;
box-shadow: 2px 2px 10px #4cc9f0,
2px 2px 10px #4cc9f0,
2px 2px 10px #4cc9f0,
2px 2px 10px #4cc9f0;
}
</style>
</head>
<body>
<input type="button" id="btn" value="按钮"/>
</body>
</html>
将鼠标放上去后