BUTTONS V. 2.0.0——CSS按钮库
BUTTONS-V2-CSS库样式职责
CSS库样式职责分离优点
模块样式命名更清晰化
易于维护、扩展性强
动画效果——修改样式后有过度效果，默认样式
源码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Buttons库学习</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: "microsoft yahei"; }
a {
text-decoration: none;
outline: none;
}
/*
* Base Button Style
*
* The default values for the .button class
*/
.button {
color: #666;
background-color: #EEE;
border-color: #EEE;
font-weight: 300;
font-size: 16px;
font-family: "microsoft yahei","Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
text-decoration: none;
text-align: center;
line-height: 40px;
height: 40px;
padding: 0 56px;
margin: 10px;
display: inline-block;
appearance: none;
cursor: pointer;
border: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: .3s;
transition-duration: .3s; } .button-large {
font-size: 20px;
height: 45px;
line-height: 45px;
padding: 0 45px; } /*
* Button Shapes
*
* This file creates the various button shapes
* (ex. Circle, Rounded, Pill)
*/
.button-rounded {
border-radius: 4px; }
/*
* Raised Buttons
*
* A classic looking button that offers
* great depth and affordance.
*/
.button-raised {
border-color: #e1e1e1;
border-style: solid;
border-width: 1px;
line-height: 38px;
background: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#e1e1e1));
background: linear-gradient(#f6f6f6, #e1e1e1);
-webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.15);
box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.15); }
.button-raised:hover, .button-raised:focus {
background: -webkit-gradient(linear, left top, left bottom, from(white), to(gainsboro));
background: linear-gradient(top, white, gainsboro); }
.button-raised:active, .button-raised.active, .button-raised.is-active {
background: #eeeeee;
-webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2), 0px 1px 0px white;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2), 0px 1px 0px white; } /*
* Base Colors
*
* Create colors for buttons
* (.button-primary, .button-secondary, etc.)
*/
.button-primary:hover, .button-primary:focus{
background-color: #4cb0f9;
border-color: #4cb0f9;
color: #FFF; } /*
* Raised Button Colors
*
* Create colors for raised buttons
*/
.button-raised.button-primary {
border-color: #088ef0;
background: -webkit-gradient(linear, left top, left bottom, from(#34a5f8), to(#088ef0));
background: linear-gradient(#34a5f8, #088ef0); }
.button-raised.button-primary:hover, .button-raised.button-primary:focus {
background: -webkit-gradient(linear, left top, left bottom, from(#42abf8), to(#0888e6));
background: linear-gradient(top, #42abf8, #0888e6); } .button-highlight {
background-color: #FEAE1B;
border-color: #FEAE1B;
color: #FFF; }
.button-highlight:hover, .button-highlight:focus {
background-color: #fec04e;
border-color: #fec04e;
color: #FFF; } </style>
</head>
<body>
<a href="#none" class="button button-raised button-primary">GO</a>
<a href="#none" class="button button-large button-highlight button-rounded">Default-CSS</a>
</body>
</html>
参考资料 BUTTONSV. 2.0.0 Buttons 是一个高度可定制的、免费并且开源的按钮 CSS 样式库。
BUTTONS V. 2.0.0——CSS按钮库的更多相关文章
- Django2.0引入css、js、img文件
Django2.0引入css.js.img文件 一.文件结构 二.settings.py的配置 # Static files (CSS, JavaScript, Images) # https://d ...
- linux下依赖库的版本问题引起的安装失败：libssl-dev版本问题无法安装 ：libssl-dev : 依赖: libssl1.0.0 (= 1.0.1-4ubuntu3) 但是 1.0.1-4ubuntu5.31 正要被安装
依赖库版本问题引起的安装失败解决方法如下有两种: 1.是由于源需要更新,如下操作: libssl-dev : 依赖: libssl0.9.8 (= 0.9.8o-1ubuntu4) 但是 0.9.8o ...
- 一个有意思的CSS样式库--BUTTONS
我最近发现了一个有意思的CSS样式库,和Bootstrap相似,但是它是专门的一个高度可定制的,免费的并且开源的按钮CSS样式库,这里附上它的网址:http://www.bootcss.com/p/b ...
- BayaiM__ORACLE之ASM概念 --V 1.0.0
BayaiM__ORACLE之ASM概念 --V 1.0.0 -------------------------------------- ...
- 从0搭建vue3组件库:Shake抖动组件
先看下效果 其实就是个抖动效果组件,实现起来也非常简单.之所以做这样一个组件是为了后面写Form表单的时候会用到它做一个规则校验,比如下面一个简单的登录页面,当点击登录会提示用户哪个信息没输入,当然这 ...
- 从0搭建vue3组件库: 如何完整搭建一个前端脚手架?
相信大家在前端开发中都使用过很多前端脚手架,如vue-cli,create-vite,create-vue等:本篇文章将会为大家详细介绍这些前端脚手架是如何实现的,并且从零实现一个create-kit ...
- vs2010下编译osip2和eXosip2的4.0.0版的静态库及搭建开发环境
转载于:http://blog.csdn.net/lbc2100/article/details/48293911 本文为参考网上的动态库的方式,进行静态库的实现,在此对动态库的作者表示感谢. 第一步 ...
- VC++6.0 下配置 pthread库2010年12月12日 星期日 13:14VC下的pthread多线程编程 转载
VC++6.0 下配置 pthread库2010年12月12日 星期日 13:14VC下的pthread多线程编程 转载 #include <stdio.h>#include &l ...
- 仅仅需手动添加一行代码就可以让Laravel4执行在SAE (v. 1.0.0)
Github:https://github.com/chariothy/laravel4-sae (已更新至v1.1.0) laravel4-sae (v. 1.0.0) 仅仅需手动添加一行代码就可以 ...
随机推荐
- 30个你必须记住的CSS选择符
所以你学会了基础的id,类和后代选择符,然后你就一直用它们了吗?如果是这样,你丢失了(css的)巨大的灵活性.在本文中提到的很多选择器属于CSS3规范的一部分,因此,只有在现代浏览器中才可使用. 1. ...
- jquery插件的两种形式
这里总结一下jquery插件的两种形式,一种是通过字面量的形式组织代码,另一种是通过构造函数的方式.下面就两种形式来分析俩个例子. 例子1: ;(function ($,window,document ...
- Apk去掉签名以及重新签名的方法
Android开发中很重要的一部就是用自己的密钥给Apk文件签名,不经过签名的Apk文件一般是无法安装的,就算装了最后也是失败. 网上流传的"勾选允许安装未知来源的应用"其实跟签不 ...
- Minor【 PHP框架】2.第一个应用与请求的生命周期
框架Github地址:github.com/Orlion/Minor (如果觉得还不错给个star哦(^-^)V) 框架作者: Orlion 知乎:https://www.zhihu.com/peop ...
- css3使用技巧：细线边框的3种不同的写法
一般的app边框描边的线都小于一像素,那么我就像往常一样直接描了1px的边框,虽然是1px可是结果和app里的描边完全不一样“粗了”,所以就在网找了一下看看有没有解决方法,可是找了一会没找到,那咋办, ...
- 深入学习jQuery自定义动画
× 目录 [1]属性对象 [2]可选参数 [3]选项参数 前面的话 很多情况下,前面介绍的jQuery动画的简单效果无法满足用户的各种需求,那么就需要对动画有更多的限制,需要采取一些高级的自定义动画来 ...
- IOS开发之自定义Button(集成三种回调模式)
前面在做东西的时候都用到了storyboard,在今天的代码中就纯手写代码自己用封装个Button.这个Button继承于UIView类,在封装的时候用上啦OC中的三种回调模式:目标动作回调,委托回调 ...
- iPhone 6/plus iOS Safari fieldset border 边框消失
问题:iPhone6 plus 手机浏览网页,fieldset border 边框消失. 示例代码: <div> <fieldset style="border: 1px ...
- java多线程--定时器Timer的使用
定时的功能我们在手机上见得比较多,比如定时清理垃圾,闹钟,等等.定时功能在java中主要使用的就是Timer对象,他在内部使用的就是多线程的技术. Time类主要负责完成定时计划任务的功能,就是在指定 ...
- 从底层开发谈WebGIS中实现地理长度固定的可视窗口的思路和方法
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.具体问题 在公司某边界城市的项目中,对方提出因为自己的地图安全度要 ...