按钮的“禁用”样式

有时由于需要,需要将自己写的按钮禁用

如:

保存

css:

.save{
			display:block;
			width:50px;
			height:50px;
			line-height:50px;
			border-radius:100%;
			background:blue;
			color:#fff;
			text-align:center;
		}

显示为:
这里写图片描述

要是input和button做的按钮,当然采用disabled属性即可解决;要是自定义的按钮:
要禁用,添加cursor样式:

.save:hover{
			cursor:not-allowed;
			background:#999;
		}

显示的效果为:hover时,“保存”按钮背景变灰,鼠标由箭头变成禁用标记;需要注意的是:此时点击该按钮仍旧会执行原有你设置的功能(例如设置该按钮为执行函数等…);这时需要经过合适的判断语句,添加合适的 return 就可阻止其后续功能;从而从样式和功能两方面实现该按钮禁用。

你可能感兴趣的:(前端,DOM,css)