【前端】html+css实现鼠标悬浮变色的按钮，消除加粗边框发生抖动现象的两种方法 hover【HTML+CSS+JavaScript(JS)】

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

效果：

在这里插入图片描述

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>zuoye4</title>
		<style type="text/css">
			div{
				display: inline-block;
				margin: 5px 10px;
			}
			input:hover{
				border-color: #FF5500;
				border-width: 5px;
				padding: 0px;
			}
			input{/* 消除抖动的两种方法 一设同色同宽边框 二提前padding预留空间 */
				/* border-width: 5px;
				border-color: #EEEEEE; */
				border-width: 1px;
				padding: 4px;
				color: #A52A2A;
			}
		</style>
	</head>
	<body>
		<div><input type="button" value="red"/></div>
		<div><input type="button" value="orange"/></div>
		<div><input type="button" value="yellow"/></div>
		<div><input type="button" value="green"/></div>
		<div><input type="button" value="cyan"/></div>
		
	</body>
</html>

注意：

当鼠标悬浮时，如果改变边框宽度的话，由于位置不够，元素会发生位移、抖动。
消除抖动的两种办法：
①一设与背景色同色，变粗后宽度同宽的边框。
②二提前设置padding预留空间，当位置足够时，自然不会发生抖动。

input{/* 消除抖动的两种方法 一设同色同宽边框 二提前padding预留空间 */
				/* border-width: 5px;
				border-color: #EEEEEE; */
				border-width: 1px;
				padding: 4px;
				color: #A52A2A;
			}