整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
注本頭條號，專注做前端
它就是一個(gè)普通的按鈕，但是它通過html5+canvas做了點(diǎn)擊特效 ——點(diǎn)擊的時(shí)候會有彩色的粒子飛散開來，效果非炫酷。
//
為大家介紹使用 CSS 來制作按鈕。
基本按鈕樣式
默認(rèn)按鈕 CSS 按鈕
CSS 實(shí)例
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
按鈕顏色
GreenBlueRedGrayBlack
我們可以使用 background-color 屬性來設(shè)置按鈕顏色:
CSS 實(shí)例
.button1 {background-color: #4CAF50;} /* Green */
.button2 {background-color: #008CBA;} /* Blue */
.button3 {background-color: #f44336;} /* Red */
.button4 {background-color: #e7e7e7; color: black;} /* Gray */
.button5 {background-color: #555555;} /* Black */
嘗試一下 ?
按鈕大小
10px12px16px20px24px
我們可以使用 font-size 屬性來設(shè)置按鈕大小:
CSS 實(shí)例
.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
圓角按鈕
2px4px8px12px50%
我們可以使用 border-radius 屬性來設(shè)置圓角按鈕:
CSS 實(shí)例
.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
嘗試一下 ?
按鈕邊框顏色
綠藍(lán)紅灰黑
我們可以使用 border 屬性設(shè)置按鈕邊框顏色:
CSS 實(shí)例
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50; /* Green */
}
...
嘗試一下 ?
鼠標(biāo)懸停按鈕
綠藍(lán)紅灰黑
綠藍(lán)紅灰黑
我們可以使用 :hover 選擇器來修改鼠標(biāo)懸停在按鈕上的樣式。
提示: 我們可以使用 transition-duration 屬性來設(shè)置 "hover" 效果的速度:
CSS 實(shí)例
.button {
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}
.button:hover {
background-color: #4CAF50; /* Green */
color: white;
}
...
按鈕陰影
陰影按鈕鼠標(biāo)懸停后顯示陰影
我們可以使用 box-shadow 屬性來為按鈕添加陰影:
CSS 實(shí)例
.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);
}
嘗試一下 ?
禁用按鈕
正常按鈕禁用按鈕
我們可以使用 opacity 屬性為按鈕添加透明度 (看起來類似 "disabled" 屬性效果)。
提示: 我么可以添加 cursor 屬性并設(shè)置為 "not-allowed" 來設(shè)置一個(gè)禁用的圖片:
CSS 實(shí)例
.disabled {
opacity: 0.6;
cursor: not-allowed;
}
嘗試一下 ?
按鈕寬度
250px
50%100%
默認(rèn)情況下，按鈕的大小有按鈕上的文本內(nèi)容決定( 根據(jù)文本內(nèi)容匹配長度 )。 我們可以使用 width 屬性來設(shè)置按鈕的寬度:
提示: 如果要設(shè)置固定寬度可以使用像素 (px) 為單位，如果要設(shè)置響應(yīng)式的按鈕可以設(shè)置為百分比。
CSS 實(shí)例
.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width: 100%;}
嘗試一下 ?
按鈕組
ButtonButtonButtonButton
移除外邊距并添加 float:left 來設(shè)置按鈕組:
CSS 實(shí)例
.button {
float: left;
}
嘗試一下 ?
帶邊框按鈕組
ButtonButtonButtonButton
我們可以使用 border 屬性來設(shè)置帶邊框的按鈕組:
CSS 實(shí)例
.button {
float: left;
border: 1px solid green
}
嘗試一下 ?
按鈕動畫
CSS 實(shí)例
鼠標(biāo)移動到按鈕上后添加箭頭標(biāo)記:
Hover
嘗試一下 ?
CSS 實(shí)例
點(diǎn)擊時(shí)添加 "波紋" 效果:
Click
CSS 實(shí)例
點(diǎn)擊時(shí)添加 "壓下" 效果:
Click
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
TML 基礎(chǔ)
非常簡單的HTML文檔
HTML 標(biāo)題
HTML 段落
HTML 鏈接
HTML 圖片
實(shí)例解析
HTML 標(biāo)題
HTML 標(biāo)題
在html源碼中插入注釋
插入水平線
實(shí)例解析
HTML 段落
HTML 段落
更多段落
本例演示在 HTML 文檔中折行的使用。
HTML 格式化的某些問題。
實(shí)例解析
HTML 文本格式化
文本格式化
此例演示如何使用 pre 標(biāo)簽對空行和空格進(jìn)行控制。
此例演示不同的"計(jì)算機(jī)輸出"標(biāo)簽的顯示效果。
此例演示如何在 HTML 文件中寫地址。
此例演示如何實(shí)現(xiàn)縮寫或首字母縮寫。
此例演示如何改變文字的方向。
此例演示如何實(shí)現(xiàn)長短不一的引用語。
文本下劃線與刪除線
實(shí)例解析
HTML 樣式
HTML Style 元素
背景色樣式
字體樣式，顏色，大小
文本對齊樣式
設(shè)置文本字體
設(shè)置文本字體大小
設(shè)置文本字體顏色
設(shè)置文本字體，字體大小，字體顏色
HTML使用不同樣式
沒有下劃線的鏈接
鏈接到一個(gè)外部樣式表
實(shí)例解析
HTML 鏈接
創(chuàng)建超級鏈接
將圖像作為鏈接
在新的瀏覽器窗口打開鏈接
鏈接到同一個(gè)頁面的不同位置
跳出框架
創(chuàng)建電子郵件鏈接
創(chuàng)建電子郵件鏈接 2
實(shí)例解析
HTML 圖像
插入圖像
從不同的位置插入圖片
排列圖片
本例演示如何使圖片浮動至段落的左邊或右邊。
制作圖像鏈接
創(chuàng)建圖像映射
實(shí)例解析
HTML 表格
簡單的表格
沒有邊框的表格
表格中的表頭
帶有標(biāo)題的表格
跨行或跨列的表格單元格
表格內(nèi)的標(biāo)簽
單元格邊距(Cell padding)
單元格間距(Cell spacing)
實(shí)例解析
HTML 列表
無序列表
有序列表
不同類型的有序列表
不同類型的無序列表
嵌套列表
嵌套列表 2
定義列表
實(shí)例解析
HTML Forms 和 Input
創(chuàng)建文本域(Text fields)
創(chuàng)建密碼域
復(fù)選框
單選按鈕
簡單的下拉列表
預(yù)選下拉列表
本例演示如何創(chuàng)建一個(gè)文本域（多行文本輸入控件）。
創(chuàng)建一個(gè)按鈕
本例演示如何在數(shù)據(jù)周圍繪制一個(gè)帶標(biāo)題的框。
帶有文本域與輸入域的表單
帶有復(fù)選框與提交按鈕的form表單
帶有單選框與提交按鈕的表單
發(fā)送郵件表單
實(shí)例解析
HTML iframe
內(nèi)聯(lián)框架 (HTML頁面中插入框架)
實(shí)例解析
HTML 頭部元素
描述了文檔標(biāo)題
HTML頁面中默認(rèn)的URL鏈接
提供文檔元數(shù)據(jù)
實(shí)例解析
HTML 腳本
插入一個(gè)腳本
使用 <noscript> 標(biāo)簽
實(shí)例解析
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。
