我最近发现了一个有意思的CSS样式库,和Bootstrap相似,但是它是专门的一个高度可定制的,免费的并且开源的按钮CSS样式库,这里附上它的网址:http://www.bootcss.com/p/buttons/

接下来介绍怎么使用这个CSS样式库,如上图,进入网址后,点击下载,会出现一个全是代码的网页,然后鼠标右键点击全选,复制,这里的代码就是这个BUTTONS的CSS样式代码,

再接下来就是在你的编辑器中创建一个css文件,然后将所复制的代码全部粘贴上去即可,然后就可以编写你的HTML代码了,当然一定要在head中引入这个css文件。(如图)

它的写法与bootstrap相似,只需要在你的标签中添加一个类名即可,当然标签只能是input/a/button

接下来介绍几种BUTTONS中的样式:

代码:

结果展示(Chrome):

这个buttons样式库个人觉得挺好的,还可以自定义按钮的背景,颜色。路过的大神感兴趣可以看一下。

thank your for watching

一个有意思的CSS样式库--BUTTONS的更多相关文章

  1. 一个简陋的 CSS 样式

    有些网友对 Smart Framewok 中的 Sample 示例的样式比较感兴趣.由于本人对前端不太精通,但为了满足网友们的需求,只好献丑了. 以下这个简陋的 CSS 样式: ? 1 2 3 4 5 ...

  2. 在input中右边加上一个图标的css样式

    https://blog.csdn.net/ffggnfgf/article/details/43384527

  3. BUTTONS V. 2.0.0——CSS按钮库

    BUTTONS-V2-CSS库样式职责 CSS库样式职责分离优点 模块样式命名更清晰化 易于维护.扩展性强 动画效果——修改样式后有过度效果,默认样式 源码如下 <!DOCTYPE html&g ...

  4. 使用sass语法生成自己的css的样式库

    前言 先说一下 sass 和 scss的区别 sass 是一种缩进语法(即没有花括号和分号,只使用换行 缩进的方式去区别子元素,PS:这是我个人的理解) scss 是css-like语法  (它的语法 ...

  5. 精简的网站reset和css通用样式库

    一.CSS reset body{ line-height:1.4; color:#; font-family:arial; font-size: 12px; } input,textarea,sel ...

  6. css样式管理

    css命名 传统网站页面(企业级),大概就是about,product,register等,他们的名字较好区分,他们的样式整体也不会很大,用简单的驼峰法就够了,或者简单的模块. 非传统企业页面,命名驼 ...

  7. [css]【转载】CSS样式分离之再分离

    原文链接:http://www.zhangxinxu.com/wordpress/2010/07/css%E6%A0%B7%E5%BC%8F%E5%88%86%E7%A6%BB%E4%B9%8B%E5 ...

  8. css样式-ime-mode text-transform

    今天遇到一个新的css样式: ime-mode   text-transform  有效小作用 取值:auto : 默认值.不影响ime的状态.与不指定 ime-mode 属性时相同 active : ...

  9. css样式表的知识点总结

    css总的来说有三种css样式可供选择: 1,行内样式表 行内样式表,直接写在了html文件的元素中,例如: <div style="color:red;"></ ...

随机推荐

  1. Excel的Sheet页复制

    最近在做一个项目,其中涉及基于模板对Excel的Sheet页进行复制.在网上尝试了很多,发现都不够完美,苦恼. 然后在查阅资料的过程中,发现有一篇提及,POI的API只对同一个Excel文件中的She ...

  2. php查找字符串中第一个非0的位置截取

    $str = '00000000000000000000000000000000000000001234506'; $preg = '/[0]*/'; $result = preg_replace($ ...

  3. Hibernate Annotation (Hibernate 注解)

    简介: 传统上,Hibernate的配置依赖于外部 XML 文件:数据库映射被定义为一组 XML 映射文件,并且在启动时进行加载. 然而现在借助新的 Hibernate   Annotation 库, ...

  4. JS里的居民们5-数组(栈)

    编码1(栈顶在最右) 练习如何使用数组来实现栈,综合考虑使用数组的 push,pop,shift,unshift操作 基于代码,实现如按钮中描述的功能: 实现如阅读材料中,队列的相关进栈.退栈.获取栈 ...

  5. Java 使用Log4J进行日志操作

    使用Log4J进行日志操作   Log4J简介   Log4J是Apache的一个开放源代码项目,它是一个日志操作包,通过使用Log4J,可以指定日志信息输出的目的地,如控制台.文件.CUI组件.NT ...

  6. 01_编程规约——OOP规约

    1.[强制]避免通过一个类的对象引用访问此类的静态变量或静态方法,避免增加编译器解析成本,直接用“类名.变量名”访问即可. 2.[强制]所有的覆盖方法,必须加@Override注解 说明:加@Over ...

  7. Android 保存和恢复activity的状态数据

    一般来说, 调用onPause()和onStop()方法后的activity实例仍然存在于内存中, activity的所有信息和状态数据不会消失, 当activity重新回到前台之后, 所有的改变都会 ...

  8. 【Python】回文palindrome——利用字符串反转

    回文 palindrome Python 字符串反转string[::-1] Slice notation "[a : b : c]" means "count in i ...

  9. WebLogic如何设置session超时时间

    1.web.xml  设置WEB应用程序描述符web.xml里的<session-timeout>元素.这个值以分钟为单位,并覆盖weblogic.xml中的TimeoutSecs属性   ...

  10. python全栈学习笔记(一)网络基础之网络协议篇

    阅读目录 一.操作系统基础 二.网络通信原理 2.1 互联网的本质就是一系列的网络协议 2.2 osi七层协议 2.3 tcp/ip五层模型讲解 2.3.1 物理层 2.3.2 数据链路层 2.3.3 ...