购物车
登陆 / 注册
微信扫码登陆

推荐手册

CSS 3 按钮

CSS 3 按钮
主要介绍如何使用CSS3来制作按钮
编辑:前端控 前端控 更新时间:2019-03-23 11:17:11

CSS 按钮

本节介绍使用 CSS 3来制作按钮

按钮颜色

可以使用 background-color 属性来设置按钮颜色

实例

.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
.button2 {background-color:#c88ee3} 
.button3 {background-color: #f44336;}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

按钮大小

可以使用 font-size 属性来设置按钮大小

实例

.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    font-size: 10px;
}
.button2 {background-color:#c88ee3;
 font-size: 15px;} 
.button3 {background-color: #f44336;
 font-size: 20px;}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

圆角按钮

可以使用 border-radius 属性来设置圆角按钮

实例

.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
   border-radius:8px;
}
.button2 {background-color:#c88ee3;
 border-radius: 14px;} 
.button3 {background-color: #f44336;
 border-radius: 20px;}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

Image 4.jpg

鼠标悬停改变背景颜色同时显示阴影

通过伪元素hover来设置,使用 box-shadow 属性来为按钮添加阴影

实例

.button2:hover {
	background-color:#c88ee3;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

Image 6.jpg

禁用按钮

可以使用 opacity 属性为按钮添加透明度,同时可以添加 cursor 属性并设置为 "not-allowed" 来设置一个禁用的图片

实例

.button2{
    opacity: 0.6;
    cursor: not-allowed;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

Image 8.jpg

按钮动画:

鼠标移动到按钮上有按压效果:

实例

.button:hover {background-color: #3e8e41}

.button:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #ccc;
  transform: translateY(4px);
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

GIF.gif

网站导航
网站首页
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ交流群
微信公众号
微信公众号