button样式设置:按钮按压效果

开发工具与关键技术:Visual Studio 2015
作者:李敏华
撰写时间:2019-4-2

在学习MVC基础时,里面的案例有很多都是有按钮的,
但button的默认样式不好看,于是设置了按钮的样式,按
钮按压时有一种现实生活中按钮向下压的效果,这样看起来
非常美观,代码也是不多,简单而又实用。
接下来就是代码的设置。
button样式设置:按钮按压效果_第1张图片
1. 先给这个按钮button设置背景颜色,下面hover属性的背景颜色最好和button的颜色相似

2. 把按钮的边框样式设置none定义无边框,字体的样式设置随意

3. outline:none,这个属性是去掉按钮边框样式;

4. cursor:pointer,这个属性是鼠标放在按钮上时有一个小手状态

5. box-shadow这个是给按钮添加阴影效果,再用border-radius给按钮设置圆角效果;

6. 好了,代码到这里就结束了。

7.
下面就是效果图:
button样式设置:按钮按压效果_第2张图片

你可能感兴趣的:(HTML)