【前端】html+css实现鼠标悬浮变色的按钮 hover【HTML+CSS+JavaScript(JS)】

最新推荐文章于 2025-05-04 14:27:33 发布

_小鹰

最新推荐文章于 2025-05-04 14:27:33 发布

阅读量8.2k

点赞数 7

CC 4.0 BY-SA版权

分类专栏：前端文章标签： css html 前端 javascript

本文链接：https://blog.csdn.net/cc2855816075/article/details/122887436

前端专栏收录该内容

38 篇文章

订阅专栏

本文介绍了HTML页面中几种常用的前端按钮设计，包括CSS样式设置和鼠标悬停效果，展示了Java基础、HTML、Spring等技术在网页开发中的应用。

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

效果：

在这里插入图片描述

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>zuoye3</title>
		<style type="text/css">
			input{
				border-radius: 10px;
				font-size: 15px;
				width: auto;
				height: auto;
			}
			input:hover{
				color: aliceblue;
				background-color: #ff5500;
			}
		</style>
	</head>
	<body>
		<input type="button" value="Java基础"/>
		<input type="button" value="HTML"/>
		<input type="button" value="Spring"/>
		<input type="button" value="Myhabits"/>
		<input type="button" value="Vue"/>
		
	</body>
</html>