知名网站按钮 css 实现（含源码）

本文收集了国内一些知名网站的按钮风格，并用按钮css生成器网站：http://buttoncssgenerator.com 对这些按钮做了实现，文中附上这些按钮的css源代码，希望对大家的工作和学习有所帮助。

1、

<a href=‘#‘ class=‘className‘>百度一下</a>

.className{
 	line-height:39px;
	height:39px;
	width:102px;
	color:#ffffff;
	background-color:#3388ff;
	font-size:16px;
	font-weight:normal;
	font-family:Arial;
	border:0px solid #dcdcdc;
	-webkit-border-top-left-radius:0px;
	-moz-border-radius-topleft:0px;
	border-top-left-radius:0px;
	-webkit-border-top-right-radius:0px;
	-moz-border-radius-topright:0px;
	border-top-right-radius:0px;
	-webkit-border-bottom-left-radius:0px;
	-moz-border-radius-bottomleft:0px;
	border-bottom-left-radius:0px;
	-webkit-border-bottom-right-radius:0px;
	-moz-border-radius-bottomright:0px;
	border-bottom-right-radius:0px;
	-moz-box-shadow: inset 0px 0px 0px 0px #ffffff;
	-webkit-box-shadow: inset 0px 0px 0px 0px #ffffff;
	box-shadow: inset 0px 0px 0px 0px #ffffff;
	text-align:center;
	display:inline-block;
	text-decoration:none;
}
.className:hover {
	background-color:#3171f3;
}

　　

2、

<a href=‘#‘ class=‘className‘>免费开店</a>

.className{
 	line-height:25px;
	height:25px;
	width:76px;
	color:#ffffff;
	background-color:#ff4400;
	font-size:12px;
	font-weight:bold;
	font-family:Arial;
	border:0px solid #dcdcdc;
	-webkit-border-top-left-radius:1px;/**按钮圆角**/
	-moz-border-radius-topleft:1px;
	border-top-left-radius:1px;
	-webkit-border-top-right-radius:1px;
	-moz-border-radius-topright:1px;
	border-top-right-radius:1px;
	-webkit-border-bottom-left-radius:1px;
	-moz-border-radius-bottomleft:1px;
	border-bottom-left-radius:1px;
	-webkit-border-bottom-right-radius:1px;
	-moz-border-radius-bottomright:1px;
	border-bottom-right-radius:1px;
	-moz-box-shadow: inset 0px 0px 0px 0px #ffffff;
	-webkit-box-shadow: inset 0px 0px 0px 0px #ffffff;
	box-shadow: inset 0px 0px 0px 0px #ffffff;
	text-align:center;
	display:inline-block;
	text-decoration:none;
}
.className:hover {
	background-color:#f22d00;
}

　　

3、

<a href=‘#‘ class=‘className‘>搜索</a>

.className{
 	line-height:33px;
	height:33px;
	width:145px;
	color:#ffffff;
	background-color:#ffb000;
	font-size:16px;
	font-weight:bold;
	font-family:Arial;
	border:1px solid #e77c00;
	-webkit-border-top-left-radius:3px;
	-moz-border-radius-topleft:3px;
	border-top-left-radius:3px;
	-webkit-border-top-right-radius:3px;
	-moz-border-radius-topright:3px;
	border-top-right-radius:3px;
	-webkit-border-bottom-left-radius:3px;
	-moz-border-radius-bottomleft:3px;
	border-bottom-left-radius:3px;
	-webkit-border-bottom-right-radius:3px;
	-moz-border-radius-bottomright:3px;
	border-bottom-right-radius:3px;
	-moz-box-shadow:0px 1px 0px 0px #955000;
	-webkit-box-shadow:0px 1px 0px 0px #955000;
	box-shadow:0px 1px 0px 0px #955000;/**按钮阴影效果**/
	text-align:center;
	display:inline-block;
	text-decoration:none;
}
.className:hover {
	background-color:#f79700;
}

　　

4、

<a href=‘#‘ class=‘className‘>登录</a>

.className{
 	line-height:30px;
	height:30px;
	width:70px;
	color:#ffffff;
	background-color:#3ba354;
	font-size:13px;
	font-weight:normal;
	font-family:Arial;
	border:0px solid #e77c00;
	-webkit-border-top-left-radius:2px;
	-moz-border-radius-topleft:2px;
	border-top-left-radius:2px;
	-webkit-border-top-right-radius:2px;
	-moz-border-radius-topright:2px;
	border-top-right-radius:2px;
	-webkit-border-bottom-left-radius:2px;
	-moz-border-radius-bottomleft:2px;
	border-bottom-left-radius:2px;
	-webkit-border-bottom-right-radius:2px;
	-moz-border-radius-bottomright:2px;
	border-bottom-right-radius:2px;
	-moz-box-shadow:0px 0px 0px 0px #955000;
	-webkit-box-shadow:0px 0px 0px 0px #955000;
	box-shadow:0px 0px 0px 0px #955000;
	text-align:center;
	display:inline-block;
	text-decoration:none;
}
.className:hover {
	background-color:#1c9439;
}

　　

5、

<a href=‘#‘ class=‘className‘>发博文</a>

.className{
 	line-height:30px;
	height:30px;
	width:120px;
	color:#000000;
	background-color:#3ba354;
	font-size:14px;
	font-weight:normal;
	font-family:SimSun;
	background:-webkit-gradient(linear, left top, left bottom, color-start(0.05, #c5f0fa), color-stop(1, #6ccddd));/**背景色渐变效果，产生立体感**/
	background:-moz-linear-gradient(top, #c5f0fa 5%, #6ccddd 100%);
	background:-o-linear-gradient(top, #c5f0fa 5%, #6ccddd 100%);
	background:-ms-linear-gradient(top, #c5f0fa 5%, #6ccddd 100%);
	background:linear-gradient(to bottom, #c5f0fa 5%, #6ccddd 100%);
	background:-webkit-linear-gradient(top, #c5f0fa 5%, #6ccddd 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#c5f0fa‘, endColorstr=‘#6ccddd‘,GradientType=0);
	border:1px solid #698d91;
	-webkit-border-top-left-radius:4px;
	-moz-border-radius-topleft:4px;
	border-top-left-radius:4px;
	-webkit-border-top-right-radius:4px;
	-moz-border-radius-topright:4px;
	border-top-right-radius:4px;
	-webkit-border-bottom-left-radius:4px;
	-moz-border-radius-bottomleft:4px;
	border-bottom-left-radius:4px;
	-webkit-border-bottom-right-radius:4px;
	-moz-border-radius-bottomright:4px;
	border-bottom-right-radius:4px;
	-moz-box-shadow:0px 0px 0px 0px #955000;
	-webkit-box-shadow:0px 0px 0px 0px #955000;
	box-shadow:0px 0px 0px 0px #955000;
	text-align:center;
	display:inline-block;
	text-decoration:none;
}
.className:hover {
	background-color:#1c9439;
	background:-webkit-gradient(linear, left top, left bottom, color-start(0.05, #6ccddd), color-stop(1, #c5f0fa));
	background:-moz-linear-gradient(top, #6ccddd 5%, #c5f0fa 100%);
	background:-o-linear-gradient(top, #6ccddd 5%, #c5f0fa 100%);
	background:-ms-linear-gradient(top, #6ccddd 5%, #c5f0fa 100%);
	background:linear-gradient(to bottom, #6ccddd 5%, #c5f0fa 100%);
	background:-webkit-linear-gradient(top, #6ccddd 5%, #c5f0fa 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#6ccddd‘, endColorstr=‘#c5f0fa‘,GradientType=0);
}

　　

6、

<a href=‘#‘ class=‘className‘>立即下载</a>
.className{
 	line-height:50px;
	height:50px;
	width:180px;
	color:#ffffff;
	background-color:#46c82f;
	font-size:25px;
	font-weight:normal;
	font-family:Arial;
	border:0px solid #698d91;
	-webkit-border-top-left-radius:4px;
	-moz-border-radius-topleft:4px;
	border-top-left-radius:4px;
	-webkit-border-top-right-radius:4px;
	-moz-border-radius-topright:4px;
	border-top-right-radius:4px;
	-webkit-border-bottom-left-radius:4px;
	-moz-border-radius-bottomleft:4px;
	border-bottom-left-radius:4px;
	-webkit-border-bottom-right-radius:4px;
	-moz-border-radius-bottomright:4px;
	border-bottom-right-radius:4px;
	-moz-box-shadow:0px 0px 0px 0px #955000;
	-webkit-box-shadow:0px 0px 0px 0px #955000;
	box-shadow:0px 0px 0px 0px #955000;
	text-align:center;
	display:inline-block;
	text-decoration:none;
}
.className:hover {
	background-color:#18d110;
}

　　

这些button css 支持各大主流浏览器， 各个网站的按钮各异，有圆角的，有立体风格的，有扁平风格的，有阴影的，有有边框的，颜色也各异，这些特色都可以使用按钮css生成器：http://buttoncssgenerator.com进行生成。

时间： 2024-08-25 20:44:49

知名网站按钮 css 实现（含源码）的相关文章

17+个ASP.NET MVC扩展点,含源码{转}

1.自定义一个HttpModule,并将其中的方法添加到HttpApplication相应的事件中!即:创建一个实现了IHttpmodule接口的类,并将配置WebConfig.在自定义的HttpModule中,可以将一个方法注册到HttpApplication的任意一个事件中,在之后执行HttpApplication一些列事件时,按照事件的顺序(事件又按照添加方法先后的顺序)执行注册在事件中的方法! namespace MvcStore.Models { public class Excute

c++实现游戏开发中常用的对象池（含源码）

c++实现游戏开发中常用的对象池(含源码) little_stupid_child2017-01-06上传 对象池的五要素: 1.对象集合 2.未使用对象索引集合 3.已使用对象索引集合 4.当前使用量 5.最大使用量 http://download.csdn.net/download/little_stupid_child/9730912

[软件测试]网站压测工具Webbench源码分析

一.我与webbench二三事 Webbench是一个在linux下使用的非常简单的网站压测工具.它使用fork()模拟多个客户端同时访问我们设定的URL,测试网站在压力下工作的性能.Webbench使用C语言编写,下面是其下载链接: http://home.tiscali.cz/~cz210552/webbench.html 说到这里,我赶脚非常有必要给这个网站局部一个截图,如下图: 第一次看到这张图片,着实吃了一精!居然是2004年最后一次更新,我和我的小伙伴们都惊呆了.不过既然现在大家还都

微信公众平台开发-access_token获取及应用（含源码）

微信公众平台开发-access_token获取及应用(含源码)作者: 孟祥磊-<微信公众平台开发实例教程> 很多系统中都有access_token参数,对于微信公众平台的access_token参数,微信服务器判断该公众平台所拥有的权限,允许或者禁止公众平台进行当前的操作. 一.access_token作用及使用场景 (一)access_token的作用 access_token由公众号的AppID和AppSecret组成,所以具有识别公众号的作用. (二)access_token的使用场景

MultiThread(VS2013 MFC多线程-含源码-含个人逐步实现文档)

原文:http://download.csdn.net/download/jobfind/9559162 MultiThread(VS2013 MFC多线程-含源码-含个人逐步实现文档).rar

Javaweb实现的优优图书商城(含源码)

原文地址:http://www.cnblogs.com/liaoyu/p/uushop.html 源码地址:https://github.com/liaoyu/uushop 贴出一个大学时做的小项目,供有需要的朋友参考,名为优优图书商城,下面为关于它的一些介绍 主要功能介绍: 用户注册.登录.个人信息管理.通过邮件找回密码 图书搜索.购买.在线浏览,购物车管理 后台echart图表显示.源代码在线编辑 主要技术: 数据库 : mysql 后台语言: Java 后台框架: Hibernate Sp

web应用心愿说 含源码

 网站地址:http://xinyuanshuo.sinaapp.com/ 源码:https://github.com/BillBillBillBill/xinyuanshuo 代码结构: 心愿说 │  config.yaml │  index.wsgi ├─files │  ├─css │  ├─i │  │  ├─avatar │  │  └─examples │  └─js ├─handler │     base.py │     board.py │     mysql.py │ 

手把手教你从最基本的Java工程搭建SpringMVC+SpringDataJPA+Hibernate(含源码下载)

转载请注明出处:http://blog.csdn.net/anxpp/article/details/51415366,谢谢! 本文会介绍从一个最基本的java工程,到Web工程,到集成Spring.SpringMVC.SpringDataJPA+Hibernate. 平时我们可能是通过一个模板搭建一个工程,或者是直接导入一个项目,而本文选择从最基本的java工程开始,目的是为了展示更多原理. 当然,我们还是从一个最基本的Maven工程开始,其实普通的非Maven工程,搭建过程几乎是一模一样的,

AWStats 日志分析系统（含源码包）

前言 在上一篇文章中写了关于httpd的一些简介.配置.那么我们应该知道,HTTP服务器的访问量非常庞大,在它的访问日志文件access_log 中,记录了很多很多客户的访问信息,维护的管理人员会通过分析这些信息,可以及时的了解Web的访问情况,比如每天或特定时间段的访问IP数量.点击量大的页面.那么就是因为访问量太多,信息量太大,所以导致管理员不方便与管理,分析.AWStats日志分析系统就诞生,下面介绍一下AWStats分析系统 有兴趣的朋友可以看看上一篇的httpd简介与配置. AWSta