自定义按钮样式

最新推荐文章于 2024-07-23 08:26:05 发布

山顶洞人95277

最新推荐文章于 2024-07-23 08:26:05 发布

阅读量1.8k

点赞数

本文链接：https://blog.csdn.net/weixin_44567226/article/details/89606191

版权

代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>自定义按钮样式</title>
</head>
<style>

	.btn{
		background-color:gray; /* Green */
		border: none;
		padding: 8px 30px;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		font-size: 12px;
		border-radius: 5%;
	}
	.btn-hong{
		background: #EC2F32;
		color: white;
	}

	.btn-lan{
		background: #5897F8;
		color: white;
	}

	.btn-cheng{
		background: #FF9E00;
		color: white;
	}

</style>

<body>
	<div style="background: #BDBCBC;height: 35px;">

		<button class="btn btn-hong">红</button>
		<button class="btn btn-lan">蓝</button>

		<button class="btn">灰</button>

		<button class="btn btn-cheng">橙</button>
	</div>
</body>

</html>

效果图：

在这里插入图片描述