以下按钮均由按钮css生成器： http://buttoncssgenerator.com/ 生成，并支持各大主流浏览器，
1、深蓝色专业典雅（带阴影）
html:
<a href='#' class='className'>css</a>
css:
.className{
line-height:46px;
height:46px;
width:154px;
color:#ffffff;
background-color:#ededed;
font-size:20px;
font-weight:bold;
font-family:Arial;
background:-webkit-gradient(linear, left top, left bottom, color-start(0.05, #599bb3), color-stop(1, #408c99));
background:-moz-linear-gradient(top, #599bb3 5%, #408c99 100%);
background:-o-linear-gradient(top, #599bb3 5%, #408c99 100%);
background:-ms-linear-gradient(top, #599bb3 5%, #408c99 100%);
background:linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
background:-webkit-linear-gradient(top, #599bb3 5%, #408c99 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#599bb3', endColorstr='#408c99',GradientType=0);
border:0px solid #dcdcdc;
-webkit-border-top-left-radius:8px;
-moz-border-radius-topleft:8px;
border-top-left-radius:8px;
-webkit-border-top-right-radius:8px;
-moz-border-radius-topright:8px;
border-top-right-radius:8px;
-webkit-border-bottom-left-radius:8px;
-moz-border-radius-bottomleft:8px;
border-bottom-left-radius:8px;
-webkit-border-bottom-right-radius:8px;
-moz-border-radius-bottomright:8px;
border-bottom-right-radius:8px;
-moz-box-shadow:0px 10px 14px -7px #276873;
-webkit-box-shadow:0px 10px 14px -7px #276873;
box-shadow:0px 10px 14px -7px #276873;
text-align:center;
display:inline-block;
text-decoration:none;
}
.className:hover {
background-color:#f5f5f5;
background:-webkit-gradient(linear, left top, left bottom, color-start(0.05, #408c99), color-stop(1, #599bb3));
background:-moz-linear-gradient(top, #408c99 5%, #599bb3 100%);
background:-o-linear-gradient(top, #408c99 5%, #599bb3 100%);
background:-ms-linear-gradient(top, #408c99 5%, #599bb3 100%);
background:linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
background:-webkit-linear-gradient(top, #408c99 5%, #599bb3 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#408c99', endColorstr='#599bb3',GradientType=0);
}
2、浅蓝色
.className{
line-height:30px;
height:30px;
width:80px;
color:#ffffff;
background-color:#ededed;
font-size:15px;
font-weight:bold;
font-family:Arial;
background:-webkit-gradient(linear, left top, left bottom, color-start(0.05, #79bbff), color-stop(1, #378de5));
background:-moz-linear-gradient(top, #79bbff 5%, #378de5 100%);
background:-o-linear-gradient(top, #79bbff 5%, #378de5 100%);
background:-ms-linear-gradient(top, #79bbff 5%, #378de5 100%);
background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%);
background:-webkit-linear-gradient(top, #79bbff 5%, #378de5 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5',GradientType=0);
border:1px solid #84bbf3;
-webkit-border-top-left-radius:6px;
-moz-border-radius-topleft:6px;
border-top-left-radius:6px;
-webkit-border-top-right-radius:6px;
-moz-border-radius-topright:6px;
border-top-right-radius:6px;
-webkit-border-bottom-left-radius:6px;
-moz-border-radius-bottomleft:6px;
border-bottom-left-radius:6px;
-webkit-border-bottom-right-radius:6px;
-moz-border-radius-bottomright:6px;
border-bottom-right-radius:6px;
-moz-box-shadow: inset 0px 1px 0px 0px #bbdaf7;
-webkit-box-shadow: inset 0px 1px 0px 0px #bbdaf7;
box-shadow: inset 0px 1px 0px 0px #bbdaf7;
text-align:center;
display:inline-block;
text-decoration:none;
}
.className:hover {
background-color:#f5f5f5;
background:-webkit-gradient(linear, left top, left bottom, color-start(0.05, #378de5), color-stop(1, #79bbff));
background:-moz-linear-gradient(top, #378de5 5%, #79bbff 100%);
background:-o-linear-gradient(top, #378de5 5%, #79bbff 100%);
background:-ms-linear-gradient(top, #378de5 5%, #79bbff 100%);
background:linear-gradient(to bottom, #378de5 5%, #79bbff 100%);
background:-webkit-linear-gradient(top, #378de5 5%, #79bbff 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff',GradientType=0);
}
3、橙色
.className{
line-height:29px;
height:29px;
width:100px;
color:#333333;
background-color:#ededed;
font-size:15px;
font-weight:bold;
font-family:Arial;
background:-webkit-gradient(linear, left top, left bottom, color-start(0.05, #ffec64), color-stop(1, #ffab23));
background:-moz-linear-gradient(top, #ffec64 5%, #ffab23 100%);
background:-o-linear-gradient(top, #ffec64 5%, #ffab23 100%);
background:-ms-linear-gradient(top, #ffec64 5%, #ffab23 100%);
background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
background:-webkit-linear-gradient(top, #ffec64 5%, #ffab23 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#ffab23',GradientType=0);
border:1px solid #ffaa22;
-webkit-border-top-left-radius:6px;
-moz-border-radius-topleft:6px;
border-top-left-radius:6px;
-webkit-border-top-right-radius:6px;
-moz-border-radius-topright:6px;
border-top-right-radius:6px;
-webkit-border-bottom-left-radius:6px;
-moz-border-radius-bottomleft:6px;
border-bottom-left-radius:6px;
-webkit-border-bottom-right-radius:6px;
-moz-border-radius-bottomright:6px;
border-bottom-right-radius:6px;
-moz-box-shadow: inset 0px 1px 0px 0px #fff6af;
-webkit-box-shadow: inset 0px 1px 0px 0px #fff6af;
box-shadow: inset 0px 1px 0px 0px #fff6af;
text-align:center;
display:inline-block;
text-decoration:none;
}
.className:hover {
background-color:#f5f5f5;
background:-webkit-gradient(linear, left top, left bottom, color-start(0.05, #ffab23), color-stop(1, #ffec64));
background:-moz-linear-gradient(top, #ffab23 5%, #ffec64 100%);
background:-o-linear-gradient(top, #ffab23 5%, #ffec64 100%);
background:-ms-linear-gradient(top, #ffab23 5%, #ffec64 100%);
background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
background:-webkit-linear-gradient(top, #ffab23 5%, #ffec64 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23', endColorstr='#ffec64',GradientType=0);
}
4、灰色立体感
.className{
line-height:34px;
height:34px;
width:84px;
color:#3a8a9e;
background-color:#ededed;
font-size:16px;
font-weight:normal;
font-family:Arial;
background:-webkit-gradient(linear, left top, left bottom, color-start(0.05, #ededed), color-stop(1, #bab1ba));
background:-moz-linear-gradient(top, #ededed 5%, #bab1ba 100%);
background:-o-linear-gradient(top, #ededed 5%, #bab1ba 100%);
background:-ms-linear-gradient(top, #ededed 5%, #bab1ba 100%);
background:linear-gradient(to bottom, #ededed 5%, #bab1ba 100%);
background:-webkit-linear-gradient(top, #ededed 5%, #bab1ba 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#bab1ba',GradientType=0);
border:1px solid #d6bcd6;
-webkit-border-top-left-radius:15px;
-moz-border-radius-topleft:15px;
border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
-moz-border-radius-topright:15px;
border-top-right-radius:15px;
-webkit-border-bottom-left-radius:15px;
-moz-border-radius-bottomleft:15px;
border-bottom-left-radius:15px;
-webkit-border-bottom-right-radius:15px;
-moz-border-radius-bottomright:15px;
border-bottom-right-radius:15px;
-moz-box-shadow:3px 4px 0px 0px #899599;
-webkit-box-shadow:3px 4px 0px 0px #899599;
box-shadow:3px 4px 0px 0px #899599;
text-align:center;
display:inline-block;
text-decoration:none;
}
.className:hover {
background-color:#f5f5f5;
background:-webkit-gradient(linear, left top, left bottom, color-start(0.05, #bab1ba), color-stop(1, #ededed));
background:-moz-linear-gradient(top, #bab1ba 5%, #ededed 100%);
background:-o-linear-gradient(top, #bab1ba 5%, #ededed 100%);
background:-ms-linear-gradient(top, #bab1ba 5%, #ededed 100%);
background:linear-gradient(to bottom, #bab1ba 5%, #ededed 100%);
background:-webkit-linear-gradient(top, #bab1ba 5%, #ededed 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bab1ba', endColorstr='#ededed',GradientType=0);
}
5、绿色圆弧
.className{
line-height:50px;
height:50px;
width:110px;
color:#ffffff;
background-color:#44c767;
font-size:17px;
font-weight:normal;
font-family:Arial;
border:1px solid #18ab29;
-webkit-border-top-left-radius:28px;
-moz-border-radius-topleft:28px;
border-top-left-radius:28px;
-webkit-border-top-right-radius:28px;
-moz-border-radius-topright:28px;
border-top-right-radius:28px;
-webkit-border-bottom-left-radius:28px;
-moz-border-radius-bottomleft:28px;
border-bottom-left-radius:28px;
-webkit-border-bottom-right-radius:28px;
-moz-border-radius-bottomright:28px;
border-bottom-right-radius:28px;
-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:#5cbf2a;
}
更多好看的按钮css 请访问 http://buttoncssgenerator.com/
相关推荐
【标题】"近100款漂亮CSS3/HTML5按钮合集.rar"涉及的知识点主要集中在CSS3和HTML5的交互设计上，尤其是利用这两种技术实现的各种样式丰富的按钮效果。CSS3是CSS（层叠样式表）的第三个版本，引入了大量新的选择器、...
4. 动画和过渡：CSS3动画和过渡用于实现平滑的用户体验，如按钮悬停效果或播放/暂停动画。 5. 响应式设计：针对不同设备和屏幕大小的适配策略，可能使用媒体查询实现。 6. Accessibility（无障碍性）：源码可能遵循...
下面我整理了7款外观都十分迷人的HTML5/CSS3 3D按钮特效，有几个还挺实用的，分享给大家...CSS3按钮可以做的非常漂亮，又可以融合一些超酷的动画特效，比如这款按钮纯CSS3 3D按钮 按钮酷似牛奶般剔[......] 阅读全文>>
CSS代码-使用50个CSS按钮 样式源代码（超炫丽）的源代码 ——学习参考资料：仅用于个人学习使用！
本文将要向大家分享8款精美的CSS3表单设计，内容包括登录表单、下拉选择、按钮等，每一个表单都有演示和源码下载，如果你喜欢，就赶紧收藏他们吧。 1、简易的CSS3登录表单 在线演示 -源码下载 2、CSS3切换式按钮...
本文将深入探讨“漂亮的CSS3按钮样式集合”这一主题，介绍如何利用CSS3特性创建出美观且功能强大的按钮，以及如何通过源码免费下载来学习和应用这些样式。 首先，CSS3的按钮样式主要依赖于以下几项关键技术： 1. *...
"10个好看的css按钮源码.rar"是一个压缩包文件，包含了10个不同设计风格的CSS按钮源代码，旨在为开发者提供灵感和实用的代码示例，以便在自己的项目中创建美观且功能完备的按钮。 这些源码可能涵盖以下知识点： 1....
这些案例可能包括简单的页面布局、交互式按钮、下拉菜单、轮播图、表单验证等常见网页功能。通过实际操作，你可以更直观地了解HTML、CSS和JavaScript是如何协同工作的，并提升解决实际问题的能力。 在学习过程中，...
在这个“html5+css3源码”压缩包中，包含的“biaobai”文件很可能是实现了一款程序员专属的表白页面。下面我们将详细探讨HTML5和CSS3在构建此类创意网页中的应用。 首先，HTML5（HyperText Markup Language 5）是第...
5. 提交按钮：用户确认填写的信息后，点击提交，通常会触发JavaScript或AJAX进行异步数据提交，避免页面刷新。 6. 验证提示：通过CSS和JavaScript进行表单验证，如必填项、邮箱格式、电话号码格式等，提供实时错误...
标题 "2020-03-12-build-your-own-bootstrap-kitten-css-源码.rar" 提供的信息表明，这个压缩包包含了构建一个自定义的 Bootstrap 主题，主题可能与“kitten”（小猫）相关的 CSS 源代码。Bootstrap 是一个流行的...
"收集几款漂亮的CSS3按钮美化例子.rar"这个资源提供了多种不同风格的CSS3按钮设计，帮助开发者和设计师学习如何利用CSS3的新特性来提升按钮的视觉效果。 【描述】中提到的几个关键点： 1. **背景渐变**：CSS3引入...
CSS3多样式小图标按钮-带分享按钮 CSS3可视化网页编辑器-基于tinymce编辑器 CSS3实现一款联系表单-输入框带小图标 HTML5 3D立方体旋转动画 HTML5_CSS3多颜色柱状图表-带基准数据线 HTML5_CSS3图片描述效果-文字描述...
HTML5 CSS3实现的光影按钮，鼠标悬停时有光影划过的效果，这是一个由CSS3代码实现的按钮特效源码，纯CSS3按钮创作实例源码。不过多介绍了，想学习CSS3的朋友，可参考这个简单的按钮 制作例子。
MUI框架是基于HTML5、CSS3和JavaScript构建的，它提供了许多预定义的UI组件，包括各种类型的对话框和提示效果，使得开发者能够快速地创建出与原生应用体验相媲美的网页应用。在这个压缩包中，"弹窗"很可能是包含了一...
Canvas火焰喷射动画效果，CSS3垂直图标菜单 带Tooltip提示框，CSS3多样式小图标按钮 带分享按钮，CSS3可视化网页编辑器 基于tinymce编辑器，CSS3实现一款联系表单 输入框带小图标，HTML5 Canvas模拟衣服撕扯动画 ...
在这个“HTML5+CSS3 精美登陆界面源码”压缩包中，包含了三个精心设计的登录界面，每一个都充分利用了HTML5的新特性与CSS3的动画效果，以提供卓越的用户体验。 首先，我们来详细了解一下HTML5。HTML5是超文本标记...
基于CSS3 Twitter红心点赞按钮动画特效源码是一款效果非常炫酷的仿Twitter“点赞”红心按钮CSS3动画特效的代码。该“点赞”特效使用一颗心形按钮，在用户点击心形按钮的时候，心形按钮由灰色变为红色，同时会在心形...
下面我们将详细探讨5款经典流行的Div+CSS网站后台源码所涉及的知识点。 1. **响应式设计**：这5款源码很可能都采用了响应式设计，意味着它们能在不同设备和屏幕尺寸上自适应显示，提供良好的用户体验。响应式设计...
本资源包“20款精美的纯CSS菜单源码”提供了20个精心设计的CSS导航菜单模板，旨在提升网站的用户体验和视觉吸引力。这些菜单不仅功能完备，而且完全基于CSS（层叠样式表）编写，无需JavaScript或者其他复杂的编程...