很多时候我都是用一张图片来做button,但是现在有更简单的方法,就是用css3来制做,并且在修改的时候不要去更改图片,只要更改某些属性就可以了。
代码:
.myButton {
background-color:#77b55a; -- 背景颜色
-moz-border-radius:17px; -- 火狐浏览器
-webkit-border-radius:17px; -- WebKit内核浏览器
border-radius:17px; -- 边框圆角的弧度,值越大弧度越大
border:1px solid #4b8f29; -- 分别是边框的宽度 边框样式(solid表示实线) 颜色;
background-color:#77b55a; -- 背景颜色
-moz-border-radius:17px; -- 火狐浏览器
-webkit-border-radius:17px; -- WebKit内核浏览器
border-radius:17px; -- 边框圆角的弧度,值越大弧度越大
border:1px solid #4b8f29; -- 分别是边框的宽度 边框样式(solid表示实线) 颜色;
display:inline-block; -- 显示为内联块状
cursor:pointer; -- 鼠标hover时会光标“箭头”会变成“手势”
color:#ffffff; -- 字体颜色;
font-family:Trebuchet MS; -- 字体 类型
font-size:21px; -- 字体 大小
font-weight:bold; -- 粗体
padding:10px 18px; -- 内边距
text-decoration:none;
text-shadow:5px 5px 0px #5b8a3c; -- 阴影
}
.myButton:hover {
background-color:#77c750; -- hover时的背景颜色
}
<a href="#" class="myButton">点击查看oye视频</a>
cursor:pointer; -- 鼠标hover时会光标“箭头”会变成“手势”
color:#ffffff; -- 字体颜色;
font-family:Trebuchet MS; -- 字体 类型
font-size:21px; -- 字体 大小
font-weight:bold; -- 粗体
padding:10px 18px; -- 内边距
text-decoration:none;
text-shadow:5px 5px 0px #5b8a3c; -- 阴影
}
.myButton:hover {
background-color:#77c750; -- hover时的背景颜色
}
<a href="#" class="myButton">点击查看oye视频</a>
效果: