20个新鲜的、彩色的CSS3按钮

是一个关于字体和css3属性的实验的结果，如文本阴影和盒阴影:

按钮被定义为链接元件，而css的外观如下所示:

.button{
padding:5px 15px 5px 15px;
text-decoration: none;
display: inline-block;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
border-bottom: 1px solid rgba(0,0,0,0.25);
font-family: "Lucida Grande",Lucida,Verdana,sans-serif;
outline:none;
position:relative;
font-size: 32px;
margin:10px;
background:transparent url(buttonover.png) repeat-x top left;
white-space:nowrap;
}
.button:hover{
background-color: #777;
}
.button:active{
top: 1px;
left:1px;
}

现在我们用他们的个人风格来定义单个按钮，然后我们将给我们的一个元素两个类:

.shadow{
background-color: #a3a3a3;
border: 2px solid #777;
color: #FFF;
font-weight:bold;
text-shadow: 0 1px 1px rgba(0,0,0,0.8);
}
.engraved{
background: #666;
border: 2px solid #777;
color: #000;
text-shadow: 0px 1px 1px #fff;
font-weight: bold;
}
.glow{
color: #fff;
background: #888;
border: 2px solid #777;
text-shadow: 1px 1px 6px #fff;
}
.white{
color: #fff;
background: #fff;
text-shadow: 1px 1px 4px #000;
border: 2px solid #f0f0f0;
font-family: "Arial";
font-weight:bold;
text-transform:uppercase;
letter-spacing:-1px;
}
.white:hover{
background-color:#f1f1f1;
}
.red{
background-color: #B00000;
border: 1px solid #7F0000;
color: #FFF;
text-shadow: 1px 1px 4px #000;
font-family: "Palatino Linotype";
}
.red:hover{
background-color:#800000;
}
.lightblue{
background-color: #7FB0F0;
color: #FFF;
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
font-weight:100;
}
.lightblue:hover{
background-color:#7FA0C0;
}
.olive{
background-color: #B0E000;
border: 1px outset #D0E000;
color: #FFF;
font-style:italic;
text-shadow: 0 2px 1px rgba(0,0,0,0.2);
}
.olive:hover{
background-color: #90A000;
}
.orange{
background-color: #FFCC00;
border: 1px outset #F2FF00;
color: #FFF;
font-family:Helvetica;
font-weight:bold;
}
.orange:hover{
background-color: #FF8000;
}
.pink{
background-color: #C0107F;
border: 1px outset #70107F;
color: #FFF;
font-family:"Georgia";
font-weight:bold;
}
.pink:hover{
background-color: #F0107F;
}
.pink:active{
border: 1px inset #70107F;
}
.sea{
background-color: #20807F;
color: #FFF;
}
.sea:hover{
background-color: #60807F;
}
.rose{
background-color: #F07FD0;
color: #FFF;
font-family: "Palatino Linotype";
font-style: italic;
letter-spacing:-1px;
text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4);
}
.rose:hover{
background-color: #B07FA0;
}
.black{
background-color: #000;
background-image:url(buttonover2.png);
color: #FFF;
letter-spacing:-1px;
text-shadow: 0 2px 1px rgba(0,0,0,0.2);
}
.black:hover{
background-color: #777;
}
.sand{
background-color: #FFF090;
background-image:url(buttonover2.png);
color: #fff;
letter-spacing: 3px;
text-shadow: 1px 0px 1px rgba(0,0,0,0.2);
}
.sand:hover{
background-color: #F0C07F;
}
.violet{
background-color: #9400D3;
background-image:url(buttonover2.png);
color: #777;
font-family:"Arial Black";
text-shadow: 0px 1px 1px #fff;
}
.violet:hover{
background-color: #8A2BE2;
}
.green{
background-color: #32CD32;
background-image:url(buttonover2.png);
color: #fff;
font-family:"Century Gothic";
text-transform:uppercase;
font-style:italic;
text-shadow: 1px 0px 1px rgba(0,0,0,0.2);
}
.green:hover{
background-color: #2F4F4F;
}
.darkblue{
background-color: #00008B;
background-image:url(buttonover2.png);
color: #fff;
font-family:"Impact";
text-shadow: 1px 0px 1px rgba(0,0,0,0.2);
}
.darkblue:hover{
background-color: #191970;
}
.sunset{
background-color: #FF6347;
background-image:url(buttonover2.png);
color: #777;
font-family:"Palatino Linotype";
text-transform:uppercase;
text-shadow: 0px 1px 1px #fff;
}
.sunset:hover{
background-color: #FF7F50;
}
.choco{
background-color: #D2691E;
background-image:url(buttonover2.png);
color: #fff;
font-family:"Gill Sans";
text-shadow: 1px 0px 1px rgba(0,0,0,0.2);
}
.choco:hover{
background-color: #D2B48C;
}
.cadet{
background-color: #5F9EA0;
background-image:url(buttonover2.png);
color: #fff;
font-family: "Arial Narrow";
text-shadow: 1px 0px 1px rgba(0,0,0,0.2);
}
.cadet:hover{
background-color: #008080;
}
.aqua{
background-color: #00FFFF;
background-image:url(buttonover2.png);
color: #fff;
font-family: "Tahoma";
text-shadow: 1px 1px 4px #000;
}
.aqua:hover{
background-color: #00FFCC;
}

html是很简单的:

<body style="background-color:#888;">
<a href="#" class="button shadow">Cool Shadow</a>
<a href="#" class="button engraved">Dark Engraved</a>
<a href="#" class="button glow">Mystic Glow</a>
<a href="#" class="button white">Frozen White</a>
<a href="#" class="button red">Sexy Red</a>
<a href="#" class="button lightblue">Heavenly Blue</a>
<a href="#" class="button olive">Olive Outset</a>
<a href="#" class="button orange">Juicy Orange</a>
<a href="#" class="button pink">Lovely Pink</a>
<a href="#" class="button sea">Deep Sea</a>
<a href="#" class="button rose">Rose Vanity</a>
<a href="#" class="button black">Buttonize Gray</a>
<a href="#" class="button sand">Dreamy Sand</a>
<a href="#" class="button violet">Violent Violet</a>
<a href="#" class="button green">Grasshopper</a>
<a href="#" class="button darkblue">Ocean Blue</a>
<a href="#" class="button sunset">Golden Sunset</a>
<a href="#" class="button choco">Sweet Chocolate</a>
<a href="#" class="button cadet">Cadet Dreams</a>
<a href="#" class="button aqua">Aqua Love</a>
</body>

当然，身体不应该是a的直接父母，而是其他的div。这只是一个快速的解决方案。

好好享受!

例简介

Sublime Text是一个代码编辑器，也是HTML和散文先进的文本编辑器。

本文通过实例来介绍项目中常用快捷键和插件的用法，熟悉快捷键和引用插件可以极大地提高我们的开发效率。

常用快捷

输入“html:5”后点击Tab键或输入“!”后点击Ctrl+E都能转换为html5的骨架结构，转换为的代码如下图：

Tips：需安装Emmet插件；

右下角的文本类型要选为“html”。

输入“div.wrapper>div.header>span.title{标题}”或“ul.lis>li*5>p.title+p.content”后点击Tab可以快速生成相应的代码，转换为的代码如下图：

Tips：上面两种写法只是其中的一部分，大家可以自己练习多种组合；

img[src="face/bd/$.gif"] ＋Tab，bd目录下自动从1开始到最后，适合于一次性增加从1--多个的图片。

“Ctrl+Shift+P”用于快速更改文件类型（js/css）（第一图）、安装插件（第二图）等，如下图：

“Ctrl+G”用于快速定位到行数，比如审查元素知道修改的样式在那一行，就可以点击快捷键，然后输入行数，就能定位到相应的位置进行修改；

“Ctrl+C”用于撤回信息，而“Ctrl+Y”用于恢复信息，都可多次操作；

“Ctrl+/”用于注释信息，可单行也可以多行；

“Ctrl+F”用于查找输入的内容，可往前、往后或全部查找；

“Ctrl+Shirt+D”用于复制游标所在行；

“Ctrl+D”用于选择游标所在单词，连续“Ctrl+D”实现多个选择（选择与第一次选择相同的单词）；如果中间有要跳过的相同单词，可以先点击“Ctrl+K”再点击“Ctrl+D”；

“Alt+F3”用于选择所有与游标所在单词相同的单词，跟上面一个快捷键对于批量修改非常方便。

“Alt+Shift+1/2/3”，后面数字表示要显示多少列，如下图，对于参照html编写css和js有很大的便利。

Tips：从标题到这块是最经常用到的快捷键，一定熟悉记住。

“Ctrl+] ”增加缩进，“Ctrl+] ” 减小缩进，好的排版有利于查看；

“Ctrl+Shift+V”保持缩进粘贴，直接用“Ctrl+V”有时会导致显示排版乱了，使用该快捷键可以保持原来的排版；

“Ctrl+PgUp”往前切换Tab栏的文件，“Ctrl+PgDn”往后切换Tab栏的文件；

“/**+Tab”常用于js的自动补全注释信息和内容；

“Ctrl+P”用于快速查找并打开文件，点击快捷键后打开命令面板，直接点击就可以打开文件，也可以进行搜索操作；

“Ctrl+L”用于选择单行；

“Ctrl+H”用于查找替换，可替换单个或全部替换；

“Ctrl+Shift+Enter”在当前上方添加一行；

右键点击“Open Containing Folder”可以打开该文件的本地目录。

“Ctrl+Shift+P”打开命令面板，输入range点击第一条就会出现了，然后输入开始和结束数字，可以批量修改序号，需安装插件Text Pastry。

“跟踪函数ctags”在使用函数调转功能前，需要先生成.tags文件，只需在项目文件管理器的项目文件上右键点击Ctags:Rebuild Tags即可（注意，在改动文件之后会重新生成.tags）；所有工作都准备充分之后，就可以在函数名上右键点击navigate 头definition跳转到指定函数了，返回用jump back，需安装插件ctags。

常用插件

直接安装：直接下载安装包解压缩到Packages目录（菜单->preferences->Browse Packages）；　

使用Package Control组件安装（在线安装）：点击“Ctrl+`”，然后输入“import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())（）”回车，下载完毕后，重启Sublime Text程序；如果在Perferences->中看到package control这一项，则安装成功。

Tips：输入代码为3版本，其他版本代码可以百度搜索。

用Package Control安装插件的方法，按下“Ctrl+Shift+P”调出命令面板，输入install 调出 Install Package 选项并回车，然后在列表中选中要安装的插件。

比如“Emmet”，在搜索框输入“Emmet”，列表就会显示插件“Emmet”，然后点击该条数据，就会开始安装该插件，安装信息可查看左下角。

Tips：安装插件时保持网络畅通，避免插件由于网络原因奔溃。

常用插件的用法说明：

Emmet（原名 Zen Coding）：一种快速编写html/css的方法；

Autoprefixer：CSS3私有前缀自动补全插件；

AutoFileName：显示路径下文件名；

SyncedSidebarBg：自动同步侧边栏底色为编辑窗口底色；

HTML-CSS-JS Prettify：html/css/js格式化工具，依赖node.js，格式化的HTML不能有中文和中文符号等，HTMLPrettify.sublime-settings路径对应node安装目录，使用快捷键“Ctrl+Shift+H”；

sublimelinter：检查js语法；

jQuery：补全JQ代码；

Text Pastry：可以一次性改批量序号，用法快捷键里面有介绍；

ctags：跟踪函数，用法快捷键里面有介绍；

Less2Css：保存less文件时候自动生成css文件，windows下，Less2CSS对lessc.cmd有依赖，请下载：https://github.com/duncansmart/less.js-windows/releases后并将其路径（ E:/Less）添加至系统环境变量中；一般建议生产环境不使用less，所以这个还是蛮方便的；

SideBarEnhancements：设置浏览器，如下图。

实际开发中，按钮的应用是必不可少。使用 CSS 来制作按钮，可以更有新意，更有趣，也可以自定义自己想要的样式。

一、平面样式CSS按钮

平面样式按钮的使用现在非常流行，并且符合无处不在的平面设计趋势。，这些的平面样式按钮效果很好看。

以下代码是按钮处于正常的情况下的状态。

例：

.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

1. 按钮颜色

颜色：Green ，Blue， Red， Gray ，Black。

可以使用 background-color 属性来设置按钮颜色。

例

.button1 {
                background-color: #4CAF50;
            }

            /* Green */
            .button2 {
                background-color: #008CBA;
            }

            /* Blue */
            .button3 {
                background-color: #f44336;
            }

            /* Red */
            .button4 {
                background-color: #FFC0CB;
                color: black;
            }

            /* Gray */
            .button5 {
                background-color: #555555;
            }

2. 按钮大小

尺寸10px ，12px ，16px 20px ， 24px。

可以使用 font-size 属性来设置按钮大小:

例：

.button1 {
                font-size: 10px;
            }

            .button2 {
                font-size: 12px;
            }

            .button3 {
                font-size: 16px;
            }

            .button4 {
                font-size: 20px;
            }

            .button5 {
                font-size: 24px;
            }

3. 圆角按钮

弧度：2px ，4px ，8px ，12px ，50%。

可以使用 border-radius 属性来设置圆角按钮:

例：

.button1 {
                border-radius: 2px;
            }

            .button2 {
                border-radius: 4px;
            }

            .button3 {
                border-radius: 8px;
            }

            .button4 {
                border-radius: 12px;
            }

            .button5 {
                border-radius: 50%;
            }

二、边框样式CSS按钮

边框样式按钮与平面按钮属于同一类。唯一的区别是，将使用边框来代替平面按钮所使用的背景颜色。以下代码是按钮处于正常的情况下的状态。

1. 按钮边框颜色

绿蓝红灰黑

可以使用 border 属性设置按钮边框颜色:

例：

.button1 {
    background-color: white;
    color: black;
    border: 2px solid #4CAF50; /* Green */
}

2. 鼠标悬停按钮

可以使用 :hover 选择器来修改鼠标悬停在按钮上的样式。

提示: 可以使用 transition-duration 属性来设置 "hover" 效果的速度:

例：

.button {
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.button:hover {
    background-color: #4CAF50; /* Green */
    color: white;
}

鼠标放在对应的色块上，显示相对应的颜色。

3. 按钮阴影

阴影按钮鼠标悬停后显示阴影。

使用 box-shadow 属性来为按钮添加阴影。

例：

.button1 {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.button2:hover {
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

4. 按钮宽度

宽度：250px，50% ，100%

默认情况下，按钮的大小有按钮上的文本内容决定( 根据文本内容匹配长度 )。可以使用 width 属性来设置按钮的宽度:

提示: 如果要设置固定宽度可以使用像素 (px) 为单位，如果要设置响应式的按钮可以设置为百分比。

CSS 实例

.button1 {
  width: 250px;
}
.button2 {
  width: 50%;
}
.button3 {
  width: 100%;
}

三、按钮组

1. 移除外边距并添加 float:left 来设置按钮组:

CSS 实例

.button {
    float: left;
}

2. 带边框按钮组

可以使用 border 属性来设置带边框的按钮组:

CSS 实例

.button {
    float: left;
    border: 1px solid green
}

四、按钮动画

1. 按样式CSS按钮

这些“按下”式按钮结合了一些平面设计和假象，让用户感觉他们实际上按下了按钮。当用户按下它时，它似乎陷入了页面。它的实现需要用到阴影来设置，使其具有3D弹出外观。以下代码是按钮处于正常的情况下的状态。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>编程字典</title>
  <style>
.pm button {
   width: 200px;
   height: 100px;
 color: #fff;
 background-color: #6496c8;
 border: none;
 border-radius: 15px;
 box-shadow: 0 10px #27496d;
}
</style>
</head>
<body>
  <div class="pm"> <button class="button">Click Me</button>
  </div>
</body>
</html>

五、总结

本文基于Html基础，主要介绍了Html中按钮组件的使用，对于按钮中需要用到的做了详细的讲解，用丰富的案例，多种样式展示，帮助大家去更好的理解。

最后，希望可以帮助大家更好的学习CSS3。

想学习更多Python网络爬虫与数据挖掘知识，可前往专业网站：http://pdcfighting.com/

在线咨询

上一篇：Html中的空格
下一篇：界面控件DevExpress WinForms HTML & CSS模板-轻松创建警报通知

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

20个新鲜的、彩色的CSS3按钮

例简介

常用快捷

常用插件

一、平面样式CSS按钮

1. 按钮颜色

2. 按钮大小

3. 圆角按钮

二、边框样式CSS按钮

1. 按钮边框颜色

2. 鼠标悬停按钮

3. 按钮阴影

4. 按钮宽度

三、按钮组

1. 移除外边距并添加 float:left 来设置按钮组:

2. 带边框按钮组

四、按钮动画

1. 按样式CSS按钮

五、总结

您的项目需求