div样式按钮

最新推荐文章于 2024-04-20 19:40:16 发布

0o勿忘初心o0

最新推荐文章于 2024-04-20 19:40:16 发布

阅读量2.4k

点赞数

分类专栏：学习实践文章标签： CSS 按钮 html按钮 div按钮

本文链接：https://blog.csdn.net/Xg_95303084/article/details/102936799

版权

学习实践专栏收录该内容

13 篇文章 2 订阅

订阅专栏

自己制作了一款按钮,觉得会有用到的机会

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		  <link rel="stylesheet" href="myButton.css">
	</head>
	<body >
		<div class="btn">
			<table border="0" width="100%" height="16px" style="border-collapse: collapse;">
				<tr>
					<td width="20"><img src="images/card2/bg2.jpg" alt="图标"></td>
					<td align="center"><span>图标按钮</span></td>
				</tr>
			</table>
		</div>
		<div class="btn btn-info">
			<table border="0" width="100%" height="16px" style="border-collapse: collapse;">
				<tr>
					<!-- <td width="20"><img src="images/card2/bg.jpg" alt="图标"></td> -->
					<td align="center"><span>按钮</span></td>
				</tr>
			</table>
		</div>
	</body>
</html>

css文件:

.btn {
	font-size: 10px;
	font-weight: bolder;
	background-color: #a59ba46a;
	width: 80px;
	
	border: 1px solid #a59ba4;
	border-radius: 6px;
	float: left;
	color: #0a010c;
	-o-user-select: none;
	-moz-user-select: none;
	/*火狐 firefox*/
	-webkit-user-select: none;
	/*webkit浏览器*/
	-ms-user-select: none;
	/*IE10+*/
	-khtml-user-select: none;
	/*早期的浏览器*/
	user-select: none;
	margin: 5px;
}
.btn tr{
	height: 24px;
}

.btn img {
	width: 16px;
	padding-top: 3px;
	padding-left: 3px;
	height: 16px;
}

.btn:hover {
	background-color: #a59ba49a;
	cursor: pointer;
}

.btn:active {
	background-color: #a59ba4;
	/* box-shadow:5px 10px 15px 2px rgba(0,0,0,0.1); /*1.水平阴影  2.垂直阴影 3.模糊距离，改虚实 4.阴影尺寸*/
	*/
}

.btn-info {
	background-color: #2CB1BA6a;
	border: 1px solid #2CB1BA;
}

.btn-info:hover {
	background-color: #2CB1BA9a;
}

.btn-info:active {
	background-color: #2CB1BA;
}

效果:

说明:

1 按钮提供图片所示两种样式

2 按钮适用于Chrome浏览器

希望有喜欢的朋友下载自己体验,欢迎评论,留言

0o勿忘初心o0

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
div样式按钮

自己制作了一款按钮,觉得会有用到的机会代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="myButton.css"> </hea...
复制链接

扫一扫