很漂亮的按钮css样式(没有用到图片,可直接拷贝代码使用)
【转自】http://blog.csdn.net/lushuaiyin/article/details/8118669
对于程序员,有时候也需要对页面风格做些改动,整体的页面风格还是美工的工作。
按钮其实是程序员很常用的,如果美工没有设计好,那就自己设计吧。
在网上发现有乐于奉献的人共享了代码。效果很好,而且没有使用到图片,这个很重要。
如果你使用别人的css,里面又用到了图片,那这个样式是没法使用的,除非,你能在网上下载使用到的图片,。
这个网址; http://www.webdesignerwall.com/demo/css-buttons.html
我们可以看看效果还是很棒的,查看源代码,里面没有引入css文件,所有按钮的样式都定义在页面上,
而且没有使用图片!这样我们直接拷贝css就可以使用了,这简直太棒了。
里面使用了多种html标签做成按钮,有a,input,span,div,p,h3。总有适合你的标签
这是人家的源码:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <title>Demo: CSS3 Buttons</title>
- <style type="text/css">
- body {
- background: #ededed;
- width: 900px;
- margin: 30px auto;
- color: #999;
- }
- p {
- margin: 0 0 2em;
- }
- h1 {
- margin: 0;
- }
- a {
- color: #339;
- text-decoration: none;
- }
- a:hover {
- text-decoration: underline;
- }
- div {
- padding: 20px 0;
- border-bottom: solid 1px #ccc;
- }
- /* button
- ---------------------------------------------- */
- .button {
- display: inline-block;
- zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
- *display: inline;
- vertical-align: baseline;
- margin: 0 2px;
- outline: none;
- cursor: pointer;
- text-align: center;
- text-decoration: none;
- font: 14px/100% Arial, Helvetica, sans-serif;
- padding: .5em 2em .55em;
- text-shadow: 0 1px 1px rgba(0,0,0,.3);
- -webkit-border-radius: .5em;
- -moz-border-radius: .5em;
- border-radius: .5em;
- -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
- -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
- box-shadow: 0 1px 2px rgba(0,0,0,.2);
- }
- .button:hover {
- text-decoration: none;
- }
- .button:active {
- position: relative;
- top: 1px;
- }
- .bigrounded {
- -webkit-border-radius: 2em;
- -moz-border-radius: 2em;
- border-radius: 2em;
- }
- .medium {
- font-size: 12px;
- padding: .4em 1.5em .42em;
- }
- .small {
- font-size: 11px;
- padding: .2em 1em .275em;
- }
- /* color styles
- ---------------------------------------------- */
- /* black */
- .black {
- color: #d7d7d7;
- border: solid 1px #333;
- background: #333;
- background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));
- background: -moz-linear-gradient(top, #666, #000);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000');
- }
- .black:hover {
- background: #000;
- background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));
- background: -moz-linear-gradient(top, #444, #000);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000');
- }
- .black:active {
- color: #666;
- background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));
- background: -moz-linear-gradient(top, #000, #444);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');
- }
- /* gray */
- .gray {
- color: #e9e9e9;
- border: solid 1px #555;
- background: #6e6e6e;
- background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
- background: -moz-linear-gradient(top, #888, #575757);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');
- }
- .gray:hover {
- background: #616161;
- background: -webkit-gradient(linear, left top, left bottom, from(#757575), to(#4b4b4b));
- background: -moz-linear-gradient(top, #757575, #4b4b4b);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#757575', endColorstr='#4b4b4b');
- }
- .gray:active {
- color: #afafaf;
- background: -webkit-gradient(linear, left top, left bottom, from(#575757), to(#888));
- background: -moz-linear-gradient(top, #575757, #888);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#575757', endColorstr='#888888');
- }
- /* white */
- .white {
- color: #606060;
- border: solid 1px #b7b7b7;
- background: #fff;
- background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
- background: -moz-linear-gradient(top, #fff, #ededed);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
- }
- .white:hover {
- background: #ededed;
- background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
- background: -moz-linear-gradient(top, #fff, #dcdcdc);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
- }
- .white:active {
- color: #999;
- background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
- background: -moz-linear-gradient(top, #ededed, #fff);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');
- }
- /* orange */
- .orange {
- color: #fef4e9;
- border: solid 1px #da7c0c;
- background: #f78d1d;
- background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
- background: -moz-linear-gradient(top, #faa51a, #f47a20);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
- }
- .orange:hover {
- background: #f47c20;
- background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
- background: -moz-linear-gradient(top, #f88e11, #f06015);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
- }
- .orange:active {
- color: #fcd3a5;
- background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
- background: -moz-linear-gradient(top, #f47a20, #faa51a);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
- }
- /* red */
- .red {
- color: #faddde;
- border: solid 1px #980c10;
- background: #d81b21;
- background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));
- background: -moz-linear-gradient(top, #ed1c24, #aa1317);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
- }
- .red:hover {
- background: #b61318;
- background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115));
- background: -moz-linear-gradient(top, #c9151b, #a11115);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115');
- }
- .red:active {
- color: #de898c;
- background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));
- background: -moz-linear-gradient(top, #aa1317, #ed1c24);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');
- }
- /* blue */
- .blue {
- color: #d9eef7;
- border: solid 1px #0076a3;
- background: #0095cd;
- background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
- background: -moz-linear-gradient(top, #00adee, #0078a5);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
- }
- .blue:hover {
- background: #007ead;
- background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
- background: -moz-linear-gradient(top, #0095cc, #00678e);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');
- }
- .blue:active {
- color: #80bed6;
- background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
- background: -moz-linear-gradient(top, #0078a5, #00adee);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
- }
- /* rosy */
- .rosy {
- color: #fae7e9;
- border: solid 1px #b73948;
- background: #da5867;
- background: -webkit-gradient(linear, left top, left bottom, from(#f16c7c), to(#bf404f));
- background: -moz-linear-gradient(top, #f16c7c, #bf404f);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f16c7c', endColorstr='#bf404f');
- }
- .rosy:hover {
- background: #ba4b58;
- background: -webkit-gradient(linear, left top, left bottom, from(#cf5d6a), to(#a53845));
- background: -moz-linear-gradient(top, #cf5d6a, #a53845);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cf5d6a', endColorstr='#a53845');
- }
- .rosy:active {
- color: #dca4ab;
- background: -webkit-gradient(linear, left top, left bottom, from(#bf404f), to(#f16c7c));
- background: -moz-linear-gradient(top, #bf404f, #f16c7c);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bf404f', endColorstr='#f16c7c');
- }
- /* green */
- .green {
- color: #e8f0de;
- border: solid 1px #538312;
- background: #64991e;
- background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));
- background: -moz-linear-gradient(top, #7db72f, #4e7d0e);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');
- }
- .green:hover {
- background: #538018;
- background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));
- background: -moz-linear-gradient(top, #6b9d28, #436b0c);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');
- }
- .green:active {
- color: #a9c08c;
- background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
- background: -moz-linear-gradient(top, #4e7d0e, #7db72f);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');
- }
- /* pink */
- .pink {
- color: #feeef5;
- border: solid 1px #d2729e;
- background: #f895c2;
- background: -webkit-gradient(linear, left top, left bottom, from(#feb1d3), to(#f171ab));
- background: -moz-linear-gradient(top, #feb1d3, #f171ab);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#feb1d3', endColorstr='#f171ab');
- }
- .pink:hover {
- background: #d57ea5;
- background: -webkit-gradient(linear, left top, left bottom, from(#f4aacb), to(#e86ca4));
- background: -moz-linear-gradient(top, #f4aacb, #e86ca4);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4aacb', endColorstr='#e86ca4');
- }
- .pink:active {
- color: #f3c3d9;
- background: -webkit-gradient(linear, left top, left bottom, from(#f171ab), to(#feb1d3));
- background: -moz-linear-gradient(top, #f171ab, #feb1d3);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f171ab', endColorstr='#feb1d3');
- }
- </style>
- </head>
- <body>
- <h1><a href="http://www.webdesignerwall.com/tutorials/css3-gradient-buttons/">CSS3 Gradient Buttons</a></h1>
- <p><em>by</em> <a href="http://www.webdesignerwall.com">Web Designer Wall</a></p>
- <div>
- <a href="#" class="button black">Rectangle</a> or
- <a href="#" class="button black bigrounded">Rounded</a> Can be
- <a href="#" class="button black medium">Medium</a> or
- <a href="#" class="button black small">Small</a>
- <br /><br />
- <input class="button black" type="button" value="Input Element" />
- <button class="button black">Button Tag</button>
- <span class="button black">Span</span>
- <div class="button black">Div</div>
- <p class="button black">P Tag</p>
- <h3 class="button black">H3</h3>
- </div>
- <div>
- <a href="#" class="button gray">Gray</a>
- <a href="#" class="button gray bigrounded">Rounded</a>
- <a href="#" class="button gray medium">Medium</a>
- <a href="#" class="button gray small">Small</a>
- <br /><br />
- <input class="button gray" type="button" value="Input Element" />
- <button class="button gray">Button Tag</button>
- <span class="button gray">Span</span>
- <div class="button gray">Div</div>
- <p class="button gray">P Tag</p>
- <h3 class="button gray">H3</h3>
- </div>
- <div>
- <a href="#" class="button white">White</a>
- <a href="#" class="button white bigrounded">Rounded</a>
- <a href="#" class="button white medium">Medium</a>
- <a href="#" class="button white small">Small</a>
- <br /><br />
- <input class="button white" type="button" value="Input Element" />
- <button class="button white">Button Tag</button>
- <span class="button white">Span</span>
- <div class="button white">Div</div>
- <p class="button white">P Tag</p>
- <h3 class="button white">H3</h3>
- </div>
- <div>
- <a href="#" class="button orange">Orange</a>
- <a href="#" class="button orange bigrounded">Rounded</a>
- <a href="#" class="button orange medium">Medium</a>
- <a href="#" class="button orange small">Small</a>
- <br /><br />
- <input class="button orange" type="button" value="Input Element" />
- <button class="button orange">Button Tag</button>
- <span class="button orange">Span</span>
- <div class="button orange">Div</div>
- <p class="button orange">P Tag</p>
- <h3 class="button orange">H3</h3>
- </div>
- <div>
- <a href="#" class="button red">Red</a>
- <a href="#" class="button red bigrounded">Rounded</a>
- <a href="#" class="button red medium">Medium</a>
- <a href="#" class="button red small">Small</a>
- <br /><br />
- <input class="button red" type="button" value="Input Element" />
- <button class="button red">Button Tag</button>
- <span class="button red">Span</span>
- <div class="button red">Div</div>
- <p class="button red">P Tag</p>
- <h3 class="button red">H3</h3>
- </div>
- <div>
- <a href="#" class="button blue">Blue</a>
- <a href="#" class="button blue bigrounded">Rounded</a>
- <a href="#" class="button blue medium">Medium</a>
- <a href="#" class="button blue small">Small</a>
- <br /><br />
- <input class="button blue" type="button" value="Input Element" />
- <button class="button blue">Button Tag</button>
- <span class="button blue">Span</span>
- <div class="button blue">Div</div>
- <p class="button blue">P Tag</p>
- <h3 class="button blue">H3</h3>
- </div>
- <div>
- <a href="#" class="button rosy">Rosy</a>
- <a href="#" class="button rosy bigrounded">Rounded</a>
- <a href="#" class="button rosy medium">Medium</a>
- <a href="#" class="button rosy small">Small</a>
- <br /><br />
- <input class="button rosy" type="button" value="Input Element" />
- <button class="button rosy">Button Tag</button>
- <span class="button rosy">Span</span>
- <div class="button rosy">Div</div>
- <p class="button rosy">P Tag</p>
- <h3 class="button rosy">H3</h3>
- </div>
- <div>
- <a href="#" class="button green">Green</a>
- <a href="#" class="button green bigrounded">Rounded</a>
- <a href="#" class="button green medium">Medium</a>
- <a href="#" class="button green small">Small</a>
- <br /><br />
- <input class="button green" type="button" value="Input Element" />
- <button class="button green">Button Tag</button>
- <span class="button green">Span</span>
- <div class="button green">Div</div>
- <p class="button green">P Tag</p>
- <h3 class="button green">H3</h3>
- </div>
- <div>
- <a href="#" class="button pink">Pink</a>
- <a href="#" class="button pink bigrounded">Rounded</a>
- <a href="#" class="button pink medium">Medium</a>
- <a href="#" class="button pink small">Small</a>
- <br /><br />
- <input class="button pink" type="button" value="Input Element" />
- <button class="button pink">Button Tag</button>
- <span class="button pink">Span</span>
- <div class="button pink">Div</div>
- <p class="button pink">P Tag</p>
- <h3 class="button pink">H3</h3>
- </div>
- </body>
- </html>
效果图片:
是不是很棒?
感谢 http://webdesignerwall.com/tutorials/css3-gradient-buttons 分享
很漂亮的按钮css样式(没有用到图片,可直接拷贝代码使用)的更多相关文章
- 按钮CSS样式
CreateTime--2017年5月5日11:23:18Author:Marydon 按钮CSS样式 实现效果: <input type="button" onclic ...
- css样式之背景图片
1.css样式背景之使用图片来做为背景 example: <!DOCTYPE html> <html> <head> <meta http-equiv=&qu ...
- Myeclipse版本引发的css样式问题:头部自动生成一行代码导致样式引入不成功
在运行新的项目之后,发现样式全部没了 利用开发者模式查看原因:是因为css样式文件的顶部自动生成了一行代码导致的 生成的代码:[genuitec-file-id="wc2-7"], ...
- 关于npm run build打包后css样式中的图片失效的问题(如background)
平时run dev都能正常显示的css背景图片在npm run build打包后竟然不显示了(写在标签对中的图片都可以正常显示),而且dist/static/img目录下是确实有这张图片的,于是查看打 ...
- Web前端开发最佳实践(8):还没有给CSS样式排序?其实你可以更专业一些
前言 CSS样式排序是指按照一定的规则排列CSS样式属性的定义,排序并不会影响CSS样式的功能和性能,只是让代码看起来更加整洁.CSS代码的逻辑性并不强,一般的开发者写CSS样式也很随意,所以如果不借 ...
- 一个有意思的CSS样式库--BUTTONS
我最近发现了一个有意思的CSS样式库,和Bootstrap相似,但是它是专门的一个高度可定制的,免费的并且开源的按钮CSS样式库,这里附上它的网址:http://www.bootcss.com/p/b ...
- Html+CSS基础之CSS样式
认识CSS样式 CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小.颜色.字体加粗等. 如下列代码: p{ fo ...
- 三种CSS样式
内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌入式和外部式三种. 内联式css样式表就是把css代码直接 ...
- 模板文件引入css样式文件
引用路径问题:相对路径和绝对路径 相对路径:相对路口文件index.php设置 绝对路径:从虚拟主机站点目录开始设置 css样式文件引入图片,路径的设置 相对地址:相对css文件本身设置 ①模板文件 ...
随机推荐
- cookie和session的区别与联系
http://www.cnblogs.com/s1nker/p/4876284.html 基本概念 对于许多人来说,都知道的是,cookie是存储在客户端的,可以用来放需要长期使用的内容,例如用户密码 ...
- pcm ulaw alaw转换
static byte ALawCompressTable[] = { 1, 1, 2, 2, 3, 3, 3, 3, 4, 4, 4, 4, 4, 4, 4, 4, 5, 5, 5, 5, 5, 5 ...
- 深入理解Feign之源码解析
转载请标明出处: 本文出自方志朋的博客 什么是Feign Feign是受到Retrofit,JAXRS-2.0和WebSocket的影响,它是一个jav的到http客户端绑定的开源项目. Feign的 ...
- IOS开发使用GCD后台运行
什么是GCD Grand Central Dispatch (GCD)是Apple开发的一个多核编程的解决方法.该方法在Mac OS X 10.6雪豹中首次推出,并随后被引入到了iOS4.0中.GCD ...
- 如何预编译ASP.Net程序
打开Developer Command Prompt,执行命令 aspnet_compiler -v \Target -p 源文件夹地址 -f 目标文件夹地址
- HTTP 1.1 协议规范
1. 内容协商 请求一个特殊编码的过程在 HTTP 1.1 规范中称为内容协商:
- Qt 5.8 移植编译、测试
/****************************************************************************** * Qt 5.8 移植编译.测试 * 说 ...
- js之敏感词过滤
HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...
- Linux下iptables介绍
ptables简介 iptables是基于内核的防火墙,功能非常强大,iptables内置了filter,nat和mangle三张表. filter负责过滤数据包,包括的规则链有,input,outp ...
- Ubuntu12.04中Gvim无法固定到启动器的解决办法
sudo vim /usr/share/applications/gvim.desktop 修改Categories键值如下: Categories=Application;Development;