`
coosummer
  • 浏览: 15091 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

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

按钮 cssbutton 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进行生成。

 

  • 大小: 6.8 KB
  • 大小: 12.7 KB
  • 大小: 3.7 KB
  • 大小: 6.6 KB
  • 大小: 6.6 KB
  • 大小: 6.5 KB
3
顶
1
踩
分享到：
| 5款漂亮的css按钮-带源码
评论
2 楼 coosummer 2015-10-27  
xiang37 写道
都是HTML5的吗？

是css3
1 楼 xiang37 2015-10-27  
都是HTML5的吗？
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js特效源码_html_css源码

    "js特效源码_html_css源码"这个主题涵盖了利用这两门语言实现的各种视觉效果和交互功能。下面，我们将深入探讨这些知识点。 首先，JavaScript是一种客户端脚本语言，它允许在用户的浏览器上运行代码，为网页添加...

    自制“闲鱼二手市场网站”；含项目源码及效果展示；开发工具Dreamweaver,简称DW;开发语言html+css+js

    标题中的“自制“闲鱼二手市场网站””指的是一个个人实践项目，仿照知名的二手交易平台闲鱼，构建了一个简易的Web应用程序。这个项目是通过学习和应用HTML、CSS和JavaScript这三种前端技术来实现的。HTML（超文本...

    仿简书的源码源码源码

    【标题】"仿简书的源码源码源码"是指一个项目，目的是模仿知名在线写作平台简书的前端界面和功能。这个源码可能是用HTML、CSS和JavaScript等前端技术实现的，旨在帮助开发者学习如何构建类似简书的Web应用。 【描述...

    手机仿M1905电影网_HTML手机电脑网站_网页源码移动端前端js效果_H5模板_自适应css源码ui组件.zip

    该压缩包文件“手机仿M1905电影网_HTML手机电脑网站_网页源码移动端前端js效果_H5模板_自适应css源码ui组件.zip”包含了一个完整的HTML5网站模板，专门针对手机和电脑设备进行了优化设计，以模仿知名的M1905电影网的...

    模仿360安全卫士玻璃按钮源码

    因此，这段源码可能兼容两种风格的玻璃按钮，旨在帮助开发者在自己的应用或软件中实现类似的设计效果。 【标签解析】 1. **模仿**：表示这段代码是参照360安全卫士和QQ管家的按钮样式设计的，目的是为了让其他...

    趣推app下载引导页网站源码

    总结，趣推App下载引导页网站源码是实现高效应用推广的关键工具，它集成了HTML、CSS和JavaScript技术，以创造一个吸引人的、响应式的单页网站，优化用户下载流程。通过精心设计和编码，这样的源码可以帮助开发者或...

    模仿京东登录web源码（html+css）

    `transition`和`animation`是CSS3的动态效果工具，可用于按钮鼠标悬停时的颜色变化、输入框聚焦时的边框特效等，增强用户体验。同时，通过媒体查询`@media`，可以针对不同屏幕尺寸调整样式，实现移动端适配。 在...

    新版PHP网易云音乐签到打卡网站源码

    5. **前端界面**：网站的用户界面通常由HTML、CSS和JavaScript构建，显示用户签到的状态，提供交互元素如按钮等。源码中的前端部分可能使用了Bootstrap或其他前端框架，以提供良好的响应式布局和用户体验。 6. **...

    宽屏高楼大厦集团网站模板是一款首页带有视频播放按钮的html5集团企业网站模板下载。_html网站模板_网页源码移动端.rar

    总的来说，这款“宽屏高楼大厦集团网站模板”集成了HTML5、CSS和JavaScript的最新技术，提供了一套完整的移动端网页解决方案，适合希望展示企业形象、提升在线知名度的集团企业。通过深入理解并利用这些技术，可以...

    好123源码 最新的源码

    好123作为一个知名的网址导航站，它的设计和功能实现具有一定的代表性，体现了当前网页设计的流行趋势和技术应用。 1. **HTML基础知识**：压缩包中的文件如`mm.htm`, `index.htm`等都是HTML文件，它们是构成网页的...

    土巴兔网站源码二次开发网站源码.zip

    【标题】"土巴兔网站源码二次开发网站源码.zip"所指的是一份包含土巴兔网站源代码的压缩文件，该源代码已经经过了二次开发，意味着它不仅包含了原始土巴兔网站的基本结构和功能，还可能进行了定制化改造以适应特定...

    Js/Jquery 实现自定义 上传 按钮

    标题 "Js/Jquery 实现自定义 上传 按钮" 涉及到的是使用JavaScript和jQuery库来创建一个自定义样式的文件上传按钮。在网页设计中，原始的文件上传控件往往样式单一，不符合现代网页的美观要求。通过JavaScript和...

    精仿2345网站源码

    7. **广告集成**：2345网站上有广告展示，因此源码中可能包含广告平台的API接口，如Google AdSense或自定义广告系统，以实现盈利。 8. **用户交互功能**：如收藏、评论、推荐等功能，需要使用cookies或session来...

    仿什么值得买网站源码 wordpress主题

    【标题】"仿什么值得买网站源码 wordpress主题"揭示了这个项目的核心——它是一个基于WordPress平台的主题设计，目的是为了创建一个类似于“什么值得买”（SMZDM）的网站。"什么值得买"是中国知名的消费决策平台，以...

    音乐盒子源码效果.zip

    《音乐盒子源码效果》是蓝叶发布的一款集成了多种音乐平台资源的源码，它包含酷狗、虾米、酷我和百度等多个知名音乐服务，同时也整合了一听音乐和电视直播功能，为用户提供一站式的音乐与视听体验。这款源码特别适合...

    仿写w3schools网站源码

    在IT行业中，学习和理解网站开发是一项基本技能，而w3schools网站作为一个知名的前后端学习资源，为开发者提供了丰富的教程和实践平台。这个项目“仿写w3schools网站源码”旨在帮助开发者通过实际操作，深入理解和...

    你问我答网源码

    【你问我答网源码】是一款专为国内用户设计的知识问答平台源代码，它提供了丰富的功能，便于构建一个类似于知名问答社区的网站。这个源码包括了基础的问答交互、内容展示、用户管理以及数据采集等多个核心模块，适用...

    仿QQ音乐小程序源码.zip

    5. **音乐播放功能**：源码中会包含音乐播放的相关实现，如播放控制按钮的事件绑定，音乐的加载、播放、暂停、切换等逻辑，以及进度条的更新和歌词同步。 6. **用户界面设计**：使用`wxss`编写样式，实现QQ音乐风格...

    精仿hao123网站导航源码，asp+acc

    【标题】 "精仿hao123网站导航源码，asp+acc" 指的是一个基于ASP（Active Server Pages）编程语言和ACC（Access数据库）开发的网站导航系统，其设计风格和功能特性与知名的hao123网站类似。这个源码可以为那些想要...

    仿某团购首页html+css

    "仿某团购首页html+css"这个项目就是针对这一领域的实践，目的是为了学习和掌握如何构建一个与知名团购网站类似的首页界面。在这个项目中，我们将探讨HTML和CSS这两种核心技术在网页设计中的应用。 HTML（HyperText...

Magicbox
Global site tag (gtag.js) - Google Analytics