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按鈕

五、總結

您的項目需求