前端几个好看的button

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>漂亮的CSS3圆角按钮组合DEMO演示</title>
<style type="text/css">
.demo{width:760px; margin:20px auto 0 auto; height:70px;}
.button {display: inline-block;outline: none;cursor: pointer;text-align: center;text-decoration: none;font: 16px/100% 'Microsoft yahei',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;
}/* 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');
}/* 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');
}/* 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');
}</style>
</head><body><div id="main"><div class="demo"><a href="#" class="button 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> <input class="button blue" type="button" value="Input Element" /> <button class="button blue">Button Tag</button></div><div class="demo"><a href="#" class="button 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> <input class="button green" type="button" value="Input Element" /> <button class="button green">Button Tag</button></div><div class="demo"><a href="#" class="button 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> <input class="button white" type="button" value="Input Element" /> <button class="button white">Button Tag</button></div><div class="demo"><a href="#" class="button 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> <input class="button orange" type="button" value="Input Element" /> <button class="button orange">Button Tag</button></div></div>
<div style="text-align:center;clear:both;">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
</body>
</html>

前端几个好看的button相关推荐

[JS][前端]修改文件input为button样式
问题描述在开发的时候,遇到了需要提交表单文件的需求,但是原生<input>标签特别不好看,而且还有点击提交文件的提示,这样很影响美观,于是便想着更改<input>为<b ...
【前端】一个好看的前端页面
序言突发奇想,看到这个特效还不错,就加工了一下,如果也能帮到你,很开心先上效果图部分代码讲解前端生成uuid function getUUID(len, radix) {var chars = ...
前端如何创建好看的简洁的蒙版弹窗
平时我们创建弹窗蒙版时,都是给创建一个div,然后给div添加透明背景色,相信大多数人都是这样写的, 包括我以前也是这样创建蒙版弹窗的. 下面给大家一个介绍一个新的方法 <div id=&quo ...
MUI框架之移动端前端开发对dialog与button轮播的深入运用与实战
1. 使用框架前的准备工作 1.创建包含mui的新HTML文件在Hbuilder中,创建一个新的HTML文件,然后选择"HTML with mui"模板以快速生成mui页面模板. ...
php好看的控件,漂亮的css button样式汇总
在网页设计过程中,程序员们常常需要配合美工来设计页面的美观效果,当然大部分页面风格都是美工的工作.但是按钮button样式,是我们程序员最常用的. 下面我们就给大家介绍一些好看的button样式,大家 ...
（收藏）漂亮的css button样式汇总
在网页设计过程中,程序员们常常需要配合美工来设计页面的美观效果,当然大部分页面风格都是美工的工作.但是按钮button样式,是我们程序员最常用的. 下面我们就给大家介绍一些好看的button样式,大家 ...
前端学习第三站——Vue2基础篇
目录 1. 环境准备 1.1安装脚手架 1.2 创建项目 1.3 安装 vue devtools 1.4 运行项目 2 Vue组件 2.1 文本插值 2.2 属性绑定 v-bind 2.3 事件绑定 ...
根据黑马pink老师讲的bootstrap而做的笔记（不过多赘述，简洁高效）第二章第二节 bootstrap前端开发框架以按钮为例（引用网站上已经设置的布局和样式）
咱们大部分围绕着两个问题来叙述是什么? 怎么做? 一.目录(总体,这门课要学的目录)(现在是第二章,bootstrap前端开发框架) 1.响应式开发 2.bootstrap前端开发框架 3.boot ...
前端监控与前端埋点(初探)
前端监控和前端埋点数据监控与前端埋点,傻傻分不清楚.什么是前端监控,什么是数据埋点.为什么把他们两个放在一起,他们之间是什么关系,这个问题我探究了很久.前端监控是在理念,前端埋点是实施方法. 前端监 ...

前端几个好看的button

前端几个好看的button相关推荐

最新文章

热门文章

前端 几个好看的button

前端 几个好看的button相关推荐

最新文章

热门文章

前端几个好看的button

前端几个好看的button相关推荐