一个有意思的CSS样式库--BUTTONS

我最近发现了一个有意思的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

原文地址:https://www.cnblogs.com/hyi520/p/9131781.html

时间: 2024-10-21 03:36:53

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

通用 css 样式库 rich.css

日期: 25 Dec 2018 ?? rich.css 用创新的方式,实现了动态的,可定制的,全覆盖的 css 样式库.无需开发 css 样式,也无需在 css html js 间切换,实现了样表库的名称编程. 传统的方式与问题 web base app 样式开发主要依赖 css 实现,css 的技术和高度定制要求开发者,必须有效组织大量的 css 文件和设计 css 对象.在页面众多的大型项目上,不得不编写大量 css 类,或者根据元素 id 定制 css 样式,甚至用内联在 html 上的样

css 样式库

关于CSS reset body{ line-height:1.4; color:#333; font-family:arial; font-size: 12px; background:white; } input,textarea,select{ font-size:12px; font-size:100%; font-family:arial; font-family:inherit; } body,h1,h2,h3,h4,h5,h6,p,ul,ol,form{ margin:0; } h

一个简陋的 CSS 样式

有些网友对 Smart Framewok 中的 Sample 示例的样式比较感兴趣.由于本人对前端不太精通,但为了满足网友们的需求,只好献丑了. 以下这个简陋的 CSS 样式: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56

自己封装的一个纯div+css样式弹出泡泡消息框

也许很多框架都自带了这样的弹出泡泡框,但我没接触过,现在需要用,于是便自己封装了一个,虽然还不完美,但已经可以用了.这个小控件可以重定义样式,通过传递配置参数,或修改默认配置参数都可以进行样式调整.不管怎么说,就当是练手,或给新人提供一个参考学习的机会也行吧 /* * js 对象合并 */ function extend(newObj, defaultObj) { var result = {}; for (var p in defaultObj) { result[p] = defaultOb

DOM设置下一个元素的CSS样式

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS-DOM</title> <script src="addLoadEvent.js"></script> <link rel="stylesheet" type="text

BUTTONS V. 2.0.0——CSS按钮库

BUTTONS-V2-CSS库样式职责 CSS库样式职责分离优点 模块样式命名更清晰化 易于维护.扩展性强 动画效果——修改样式后有过度效果,默认样式 源码如下 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Buttons库学习</title> 6 <style type=&q

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

一.CSS reset body{ line-height:1.4; color:#333; font-family:arial; font-size: 12px; } input,textarea,select{ font-size:100%; font-family:inherit; } body,h1,h2,h3,h4,h5,h6,p,ul,ol,form{ margin:0; } h4,h5,h6{ font-size:1em; } ul,ol{ padding-left:0; list

[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%86%8D%E5%88%86%E7%A6%BB/ 一.关于CSS样式分离 zxx://一些名词表意含有自己的理解成分,或许与您的理解有偏差,希望不要拘泥于措辞.无论是CSS的分离还是js的分离,其主要作用之一就是精简与重用. CSS本身就代表着精简与重用.例如我们可以设置一个如下的样式: .exa

网页css样式表部分

层叠样式表:CSS Cascading Style Sheet.V2.1  (3.0版本有些旧系统不支持) 控制页面样式外观. 一.样式表分三类: 1.内联样式表.——放在元素的开始标记中.——只对当前元素起作用. <input name="txt" style="border:0px; border-bottom:1px solid black;" type="text" />       (solid意思是实线) 2.内嵌样式表.