CSS 按钮button美化

最新推荐文章于 2025-06-12 11:49:10 发布

原创最新推荐文章于 2025-06-12 11:49:10 发布 · 7.9w 阅读

168 ·

CC 4.0 BY-SA版权

CSS 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种使用CSS实现美观登录按钮的方法，包括尺寸、边框、背景色及交互效果等细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

.login-button { /* 按钮美化 */
	width: 270px; /* 宽度 */
	height: 40px; /* 高度 */
	border-width: 0px; /* 边框宽度 */
	border-radius: 3px; /* 边框半径 */
	background: #1E90FF; /* 背景颜色 */
	cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
	outline: none; /* 不显示轮廓线 */
	font-family: Microsoft YaHei; /* 设置字体 */
	color: white; /* 字体颜色 */
	font-size: 17px; /* 字体大小 */
}
.login-button:hover { /* 鼠标移入按钮范围时改变颜色 */
	background: #5599FF;
}

效果