整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
過一段時間的醞釀，我決定繼續開啟頭條文章的發布。
1. 將自己平常工作學習中的素材積累，分享在頭條號。既能加深記憶，又能為大家帶來分享。
2. 標題為零基礎HTML的意思很簡單，我希望讓HTML這個前端語言變成每一位網友都熟知的語言。因為它其實并不復雜，甚至可以說它就是計算機語言中的“美圖秀秀”
3. 如有想加深學習進度的小伙伴，請私信我。
廢話不說了，開始 零基礎HTML素材積累01 CSS HOVER的7個按鈕
CSS hover 樣式很簡單，但是想創造出有意思、實用、有創意性的特效是很考驗設計師的創意能力，所以設計達人每隔一段時間都會分享一些與鼠標點擊、懸停的相關特效，以便大家獲得更好的創造靈感。
今天我們整理了10組網頁按鈕的點擊與懸停效果，每組都有不同的特色以及創意性，下面達人將特效錄制成 GIF 動圖，方便大家在線觀看
查看演示: 私信九弓子：css hover （獲取源碼演示鏈接）
文：https://uxdesign.cc/ui-cheat-sheets-buttons-7329ed9d6112
作者：Tess Gadd
翻譯：水手哥（公眾號ID:shuishouge_design）
按鈕在UI界面設計中是不可或缺的元素之一，這篇文章我們將介紹不同類型的按鈕包括按鈕的狀態和交互。我們介紹的都是日常界面中使用的普通按鈕，并不包括單選按鈕、選項卡、復選框等其他類型的按鈕。
按鈕的不同分類如下：
動作按鈕
我們將分析按鈕的層次結構和它們通信的語言。雖然有些按鈕通熟易懂，但按鈕操作不取決于它們的外觀，而是取決于用戶的行為。
1_1.行為召喚（CTA / C2A）
在設計中行為召喚按鈕通常會提示用戶注冊/立即購買等。在產品設計中如果強烈建議用戶應該做的事情應該使用CTA按鈕。
行為召喚按鈕
對于CTA按鈕，我喜歡使用圓形按鈕，這樣會更引人注目。
1_2.主要操作按鈕
雖然CTA按鈕和主按鈕看起來相同，但我喜歡將它們分開。主按鈕應該是一個強大的視覺指示器，可以幫助用戶完成他們的旅程。主按鈕應該在用戶可能想要“下一步”、“完成”、“開始”等的情況下使用。
主要操作按鈕
對于主要操作，我喜歡使用實心按鈕。
1_3.次要操作按鈕
從“返回”的輔助按鈕到“下一步”的主按鈕，或從“編輯”的輔助按鈕到“保存”的主按鈕。輔助按鈕是我們為用戶提供的主要操作的備選方案。
主按鈕旁邊的輔助按鈕的兩種設計
我更傾向于使用線性按鈕或文本鏈接作為輔助按鈕。
1_4.三級按鈕
三級按鈕通常用于其他操作，可能暫時不是用戶想要做的事情。比如“添加朋友”、“掃一掃”、“編輯”或“刪除”之類的內容，前提是它們不是主要操作。
不同形式的三級按鈕
一般來說，人們會使用較小或較不突出的按鈕樣式。
常用按鈕樣式
下面我們將介紹常見的按鈕樣式，不同風格的按鈕樣式和他們的使用技巧。
2_1.實心按鈕
實心按鈕是帶有實心填充的按鈕。
一個實心按鈕
2_2.線性和幽靈按鈕
線性按鈕和實心按鈕正好相反，一個沒有填充的按鈕 – 只是一個輪廓。雖然經常互換使用，但我更喜歡將線性按鈕視為淺色（在白底下按鈕的輪廓和文本顏色深一點更明顯），將幽靈按鈕視為深色（在黑底下按鈕的輪廓和文本顏色淺一點更明顯）。
線性按鈕（左）和幽靈按鈕（右）
2_3.圓形按鈕
圓形按鈕其邊緣設置為最大圓角半徑。
圓形按鈕
2_4.FAB（懸浮按鈕）
懸浮按鈕是一種巧妙的設計模式，Google Material Design中更加受歡迎。雖然它們可能看起來像一個圖標按鈕，但實際上它們用在屏幕上的主要操作按鈕。
一個懸浮按鈕
如果您想了解有關FAB的更多信息，我建議您在Material Design的網站上查看( https://material.io/design/components/buttons-floating-action-button.html )
2_5.文字鏈接
文本鏈接是一種非常簡單的按鈕類型。有幾種不同的方式可以表明它是一個鏈接。它可以是顏色/下劃線/鏈接的文本，甚至就是文本本身（例如“閱讀更多”）。
文本鏈接的不同樣式
在顏色方面，大多數網站使用藍色，因為它是最容易識別的。為什么文本鏈接的顏色會使用藍色？它一直追溯到是萬維網的發明者，在他選擇顏色時發現藍色很酷的一種顏色，即使是色盲的人通常也能看到它。
2_6.帶圖標的標簽按鈕
圖標按鈕越來越受歡迎，一些按鈕仍然需要一個標簽來確保按鈕的語意明了。
帶圖標的標簽按鈕
處理圖標和標簽時最棘手的事情是弄清楚字體組合的圖標有多大。
方法1：讓圖標的大小對齊字體的頂線。
方法2：讓圖標的大小對齊字體的行高。需要注意的是確保圖標和字體的組合視覺均衡。
2_7.圖標按鈕
圖標按鈕沒有標簽，只是一個圖標。因為它們沒有標簽，所以它們在界面中節省了大量空間。圖標按鈕還可以將其他圖標按鈕一起排列在它們的小空間中。
圖標按鈕具有不同的風格
如果你在為計算機認知度較低的人群設計產品時，我建議使用帶標簽的按鈕 – 尤其是那些很抽象的語意。
2_8.帶圖標的文本鏈接
某些文本鏈接可能帶有圖標。這些通常不會在正文中使用。
各種帶圖標的文本鏈接
按鈕的顏色和形狀
在設計按鈕時，需要考慮以下幾個不同的元素。
3_1.顏色
在設計產品時，你應該要考慮有視覺障礙的人。為確保每個人都可以訪問你的顏色，你可以使用在線對比度檢查器。我使用的是那個。( https://accessible-colors.com/ )
不同顏色的按鈕
另外，在選擇顏色時應該考慮色彩心理學。紅色按鈕多用于刪除，黃色按鈕多用于警示等。
“刪除”、“警告”、“保存”和“更多”按鈕
3_2.邊界半徑
邊界半徑為按鈕提供了很多個性化設計。具有更圓半徑的按鈕看起來更有趣。
不同邊界半徑設置的按鈕
3_3.投影
按鈕上的投影使按鈕更加自然引人注意。陰影也可用于指示不同的狀態。 ( https://material.io/design/environment/elevation.html#depicting-elevation )
Material Design通過使按鈕在懸停狀態下來達到這個效果。
不同陰影設置的按鈕
3_4.標簽樣式
標簽樣式歸結為字體以及閱讀的容易程度。選擇字體時，請確保它清晰可辨。
不同標簽樣式的按鈕
以下是一些簡單的方法可以讓字體清晰易讀：
* 選擇大寫的標簽或大標題。（Material Design使用過帶有大寫標簽的按鈕。）
* 確保標簽顏色與按鈕填充對比較為突出。您可以使用( http://accessible-colors.com/ ) 查看。始終確保您的顏色符合AAA要求。
* 選擇字體時，請確保字體清晰。
3_5.垂直內間距
按鈕的大小對界面的可訪問性起著很大的作用。大多數沒有經驗的設計師會說“按鈕的高度應該是36像素”。如果你是為產品系統的設計按鈕。你應該采用所用字體的行高，并在其中添加一定單位的內間距。例如：“我的按鈕標簽的行高為20px，垂直內間距為8px”。
不同垂直內間距的按鈕
為什么會這樣設定呢？這里有兩個原因：
1）有視覺障礙的人可能會增大瀏覽器中的字體，因此他們需要更改字體大小而不會將按鈕高度定死。
2）這也是開發人員創建按鈕的方式-他們在DIV容器中添加內間距，而不是固定高度。
3_6.水平內間距
有兩種方法可以接近水平內間距。
第一個方法：
使按鈕寬度與網格對齊。這是保持所有按鈕長度一致的好方法。但是它限制了你可以使用的字體數量。
寬度由網格決定的按鈕
第二個方法：
兩側有固定內間距。我通常還會定按鈕最小寬度，雖然避免了很窄的按鈕，但是最小寬度按鈕可容納的不同字段會讓按鈕看上去不是很均勻。
寬度由內間距和標簽長度決定的按鈕
按鈕狀態和反饋
按鈕狀態讓用戶知道他們是否可以點擊、已經點擊或已成功點擊。按鈕還可以有重疊的狀態。例如可以同時是“點擊”和“懸停”狀態。
4_1.點擊和禁用狀態
點擊狀態就是鼠標可以點擊按下按鈕的狀態，當然如果用戶沒有完成必要的步驟，按鈕可以被禁用。例如用戶沒有輸入他們的姓名和電子郵件地址，他們就不能提交他們的詳細信息。
點擊和禁用按鈕
4_2.懸停和懸停離開（鼠標懸停和鼠標懸停離開）
在PC端按鈕應具有不同的狀態，讓用戶知道它是可點擊的。通常“懸停”狀態和“懸停離開”狀態相反，但也不一定。你應該有效的區分讓用戶感知鼠標懸停在某個按鈕上。
懸停演示按鈕
平板電腦和移動設備上永遠不會出現懸停狀態，因為你的手指無法“懸停”。如果您正在為應用程序進行設計，請不要擔心此狀態。
4_3.焦點
焦點狀態可能會讓用戶困惑。如果你的用戶專注度較差，他們可能需要使用選項卡式導航。用戶將點擊“選項卡”在網站上移動，從一個導航鏈接移動到下一個。這意味著按鈕需要有一個“焦點”狀態才能顯示它是“可點擊的或尚未點擊”。
默認的焦點狀態是藍色“發光”，幸運的是，我們生活在一個可以自定義按鈕狀態的時代。大多數設計師對懸停和焦點狀態使用相同的視覺提示。
兩個不同“焦點”狀態的例子
4_4.按下
按下狀態是當用戶的光標或手指“按住”按鈕時的狀態。當用戶將手指或光標“釋放”在按鈕上時，該按鈕會指示為“已點擊”。
“按下”狀態的按鈕
4_5.點擊
按鈕需要“點擊”狀態以向用戶指示它已被點擊。
“點擊”狀態的按鈕
按鈕標簽
按鈕標簽的訣竅是一致性。我們在產品設計前期需要制定按鈕標簽的規范，以避免以后花更多時間去改變你所有的按鈕標簽。
5_1.動詞的用法
大多數按鈕都包含指示按鈕將執行什么操作，例如“保存”、“發布”、“編輯”。雖然“back”和“next”不是動詞，但在接口上下文中，它們的工作方式似乎相同。我喜歡在編寫按鈕標簽時使用“動詞” “名詞”結構，這會讓操作更具規定性，例如“保存文章”等，而不是“保存”。
5_2.案例
你還應該決定使用哪種字體大小寫。以下是我使用的一些規范：
所有大寫字母，例如“NEXT SECTION”，我把它們用于更專業的平臺。Material Design使用所有大寫字母的按鈕。
標題框，例如“Next Section”，我傾向于避免使用標題大小寫，因為它不像句子大小寫那樣容易閱讀。就語調而言，我認為它介于“專業”和“會話”之間。
句子大小寫，例如“Next section”，我把它們用于更“友好”或“對話”的平臺。它更像是一句話，正常我們一句話結束會加一個句號，但是為了設計的美感，請不要加一個句號。
小寫，例如“next section”，小寫按鈕標簽使用頻率較低。
5_3.一致性
為按鈕編寫標簽時，請確保一致性。以下是一些我在項目使用的指導原則：
選擇字數：每個按鈕一個、兩個或多個字
選擇大小寫：句子大小寫，或大寫，或標題大小寫，或小寫
標簽結構：如“動詞” “名詞”，或“動詞”等。
觸摸屏按鈕
桌面按鈕大小調整（單擊）
因為桌面上的光標比觸摸屏上的手指小，所以您可以將按鈕縮小很多。
觸摸屏按鈕尺寸（點擊）
麻省理工學院觸摸實驗室的研究表明，人在使用觸摸屏時手指部分是8-10毫米，如果你想避免用戶手指觸摸錯誤，最小目標尺寸需要10毫米或更大。如上所述-我需要較大的按鈕。
那么，你應該做多大尺寸的按鈕呢？專家們說的是：
Material Design建議接觸目標應為48dp x 48dp，不同接觸點之間距為8dp。
雖然我找不到關于iOS設計系統目標尺寸的任何文檔，但一般的理解是，它的最小目標尺寸是44 x 44磅。
如果您在設計大小尺寸方面遇到困難，我強烈推薦Zac Dickerson關于易用性的故事。
按鈕位置
如果你非要放置2個按鈕，主按鈕應放在哪一側？
主要和次要按鈕的兩種不同立場
選項A顯示左側為主按鈕。它可能是用戶首先想要看到的，所以先顯示它。
選項B顯示右側為主按鈕。我們希望用戶首先看到輔助按鈕，方便他們繼續完成他們的旅程。右側的按鈕也表示繼續。
系統按鈕
這里會介紹一些很酷的設計原則和系統。我喜歡Material Design System的按鈕，因為他們的原理是經過深思熟慮的。
Material Design System的按鈕
Material Design 按鈕圖片
Material Design中介紹了按鈕的操作，以及按鈕如何與系統中的其他組件交互。我喜歡用戶在觸摸屏上使用按鈕的交互方式。
查看按鈕部分：
https://material.io/design/components/buttons.html
懸浮按鈕在這里查看：
https://material.io/design/components/buttons-floating-action-button.html
總結
如果沒有按鈕，你就不能真正構建界面；我們應該更多的關注它們。了解按鈕在界面中是如何設計的？怎樣正確的使用按鈕并為你的用戶提供最佳的體驗？
于前端開發人員來說，css是我們再熟悉不過的朋友的，它就相當于是我們頁面的衣服，頁面好不好看，就看我們css運用的是否爐火純青[小鼓掌][小鼓掌][小鼓掌]。css學起來簡單，但是我們要把它“修煉”到出神入化境界，那這可不是一丁點時間就可以的，需要我們的日積月累，時刻專研。
而今天，就帶給大家一個CSS特效-霓虹燈按鈕，這也是我看到很不錯的效果，帶來分享給大家，希望大家喜歡[送心][送心][送心]
效果如下：
最終效果
那好，廢話不多說，開始我們的CSS代碼。
// 這里我們用div標簽來模擬button按鈕，標簽可以隨意，a、p、span等都可以
// 通常在開發中使用別的標簽來代替button標簽，是因為原始的標簽樣式不好看，
// 我們還得重置樣式，而其他標簽不帶有樣式，我們可以更好的控制自己想要的樣式，
// 當然，button標簽也是可以的，但是如前面所說，原始的樣式需要我們重置。
<div class="btn">button</div>body {
margin: 0;
padding: 0;
background: #000; // 黑色背景，只為更能突出樣式效果
}
// 初始化按鈕樣式
.btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 60px;
text-align: center;
line-height: 60px;
color: #fff;
font-size: 24px;
font-family: sans-serif;
text-decoration: none;
text-transform: uppercase;
box-sizing: border-box;
// linear-gradient() 漸變屬性，函數用于創建一個表示兩種或多種顏色線性漸變的圖片
background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
background-size: 400%;
border-radius: 30px;
}初始樣式為這樣：
初始樣式
然后我們給按鈕加上動畫，代碼如下：
.btn:hover {
// linear: 動畫從開始到結束具有相同的速度。
// infinite: 無限次播放
animation: animate 8s linear infinite;
}
@keyframes animate {
0% {
background-position: 0%;
}
100% {
background-position: 400%;
}
}效果就變為下面這樣：
最后我們給它加上鼠標移上去的效果，代碼如下：
.btn::before {
content: '';
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
z-index: -1;
background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
background-size: 400%;
border-radius: 40px;
opacity: 0;
transition: .5s;
}
.btn:hover::before {
filter: blur(20px);
opacity: 1;
animation: animate 8s linear infinite;
}現在這樣，就是我們的最終效果了：
就此，我們的霓虹燈的按鈕效果就完成了
不足百行，我們就完成了這個效果，以下是我們的CSS的全部代碼：
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
