用css常用样式制作炫酷按钮_css按钮-优快云博客

本文链接：https://blog.youkuaiyun.com/duoba_an/article/details/135296471

一、实验要求

1.制作一个按钮

2.能够点击

3.能够看出鼠标放置之后的变化

二、实验思路

将用到css的一些常用样式，在内容里边体现

三、实验步骤

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#cl{
				width: 200px;                          设置了按钮的宽，高
				height: 80px;
				border: 3px solid aliceblue;           边框
				background-color: blue;                背景
                line-height: 80px;                     行高
                 border-radius: 30px;                  边框的角度     
				font-size: 20px;                       字体的大小              
				font-weight:1000;                      粗细
				text-align: center;                    位置
				color: aliceblue;                      颜色                
				transition: 1s;                        延迟时间
				cursor: pointer;                       点击动作
			} 
			#cl:hover{                                 鼠标放置后的变化效果
				background-color: #f2481b;                
				color: black;
				box-shadow: 5px 5px 20px #f2ce2b,
				-5px -5px 20px #f2481b,
				-5px 5px 20px #229453,
				5px -5px 20px #f2481b;
				border-color: #fbecde;
			}
		</style>
	</head>
	<body>                   
		<div id="cl">                                  设置一个按钮名称
			上传照片
		</div>
	</body>
</html>