Z | 迁延蹉跎 来日无多

迁延蹉跎 来日无多
  1. 首页
  2. 分享
  3. 正文

简单定义一个按钮样式

2014年10月17日 756点热度 0人点赞 0条评论

利用好CSS可以制作出精美的效果,比如下面的各种按钮:
buttons
这里拿个简单的做例子,比如CSS代码如下:

a{
    border: 0px none;
    font-family: 'Open Sans','Microsoft YaHei', sans-serif;
    font-size: 100%;
    font-style: inherit;
}
a.z-button,
a.z-button:visited {
    display: inline-block;
    color: #fff!important;
    background: #ff4a64;
    text-decoration: none!important;
    text-align: center;
    font-weight: 700;
    outline: none;
    border-radius: 2px;
    line-height: 1em;
    padding: 10px 20px!important;
    cursor: pointer;
    margin: 0 0.1em 1.5em 0!important;
    vertical-align: middle;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
}
a.z-button:hover {
    text-decoration: none;
    background: #fd3e59;
}
a.z-button:active {
    position: relative;
    top: 1px;
}

使用时候只需要定义 a 标签的class属性为z-button就可以调用css样式
最终的显示效果就是这样的:
Download

标签: button css html
最后更新:2021年9月5日

Z

这个人很懒,什么都没留下

点赞
< 上一篇
下一篇 >

文章评论

razz evil exclaim smile redface biggrin eek confused idea lol mad twisted rolleyes wink cool arrow neutral cry mrgreen drooling persevering
取消回复

Z

这个人很懒,什么都没留下

最新 热点 随机
最新 热点 随机
终端体验提升:zsh-syntax-highlighting高亮zsh可用命令 终端体验提升:Zsh+Oh-my-zsh Debian10安装Shadowsocks-libev Navicat数据库管理软件 LNMP开启Mysql远程访问 批量替换wordpress文章内容
Sublime Text 更改侧边栏样式 更换谷歌字体库解决fonts.googleapis.com加载慢 linux添加SSH帐号 wordpress tips:不加载默认的jQuery库 国内免费CDN加速和云存储:七牛 不用插件实现代码语法高亮
标签聚合
chrome shadowsocks debian linux 外链 vps wordpress wordpress tips

COPYRIGHT © 2021 zhuzhilei.com. ALL RIGHTS RESERVED.

Theme Kratos Made By Seaton Jiang