就一個(gè)按鈕，還讓我做的有設(shè)計(jì)感？這老板是不是有病啊！

如果你的老板讓你把按鈕做的有設(shè)計(jì)感，你肯定沒啥思路，只會(huì)改顏色、圓角和字體大小，但今天你有福氣了，給你介紹6種風(fēng)格按鈕，而且還帶動(dòng)效，設(shè)計(jì)感爆棚，效果依次如下：

1、漸變光環(huán)按鈕動(dòng)效

• 動(dòng)效：漸變色環(huán)繞按鈕，背景發(fā)光效果增強(qiáng)動(dòng)感，吸引用戶點(diǎn)擊。

• 視覺亮點(diǎn)：簡潔明了的文字設(shè)計(jì)和智能感的漸變效果，突出按鈕的互動(dòng)性和可操作性

2、雙按鈕滑動(dòng)動(dòng)效

• 動(dòng)效：主按鈕和副按鈕貼合絲滑彈跳切換，引導(dǎo)用戶進(jìn)一步了解，增強(qiáng)視覺引導(dǎo)感。

• 視覺亮點(diǎn)：簡潔的文字和主副按鈕結(jié)合的設(shè)計(jì)，增強(qiáng)了按鈕的趣味性

3、底色滑動(dòng)切換按鈕動(dòng)效

• 動(dòng)效：鼠標(biāo)點(diǎn)擊時(shí)，按鈕填充色滑動(dòng)切換，且背景厚度逐漸收回，給用戶明確的點(diǎn)擊反饋。

• 視覺亮點(diǎn)：大膽的對比色設(shè)計(jì)和清晰的字體，增強(qiáng)按鈕的可點(diǎn)擊性和視覺沖擊力。

• 動(dòng)效：鼠標(biāo)懸停時(shí)，線框按鈕增加亮色填充和厚度及線性星星圖標(biāo)，效果增添活力，吸引用戶點(diǎn)擊。

• 視覺亮點(diǎn)：明亮的綠色與黑色邊框?qū)Ρ葟?qiáng)烈，突出按鈕的可點(diǎn)擊性，文字簡潔且突出。

5、掃光+字體線面切換按鈕動(dòng)效

• 動(dòng)效：文本從左到右滑動(dòng)，末尾箭頭逐漸顯現(xiàn)，強(qiáng)調(diào)后續(xù)操作引導(dǎo)。

• 視覺亮點(diǎn)：簡潔的白色字體與黑色背景對比，文字線面性的切換，簡潔而高級。

6、Q彈翻頁按鈕動(dòng)效

• 動(dòng)效：鼠標(biāo)懸停時(shí)，按鈕從邊緣開始動(dòng)態(tài)變化顏色，增加動(dòng)態(tài)互動(dòng)反饋。

• 視覺亮點(diǎn)：鮮亮的黃色與黑色邊框設(shè)計(jì)，字體簡潔清晰，突顯聯(lián)系信息的可點(diǎn)擊性和重要性。

除了這種有風(fēng)格的按鈕，大家平時(shí)還會(huì)遇到一些，普通的按鈕，老板讓加設(shè)計(jì)感，但不知道怎么做的，今天也給大家來個(gè)小案例，比如下面這個(gè)卡片按鈕，毫無設(shè)計(jì)感，如何解決呢？

第一步你可以把文字變成兩排，讓卡片按鈕排版飽滿：

第二步可以加個(gè)圖形修飾，比如箭頭，正好還解決了不知道可以點(diǎn)擊的問題：

第三步，把文字和圖形從純黑色變成深棕色，讓整體更佳融合：

第四步，給卡片加一點(diǎn)質(zhì)感，更加有點(diǎn)擊感，然后背景加一個(gè)淡黃色漸變：

再看下前后對比：

效果就好多了！

希望今天的6各種按鈕風(fēng)格和一個(gè)普通卡片按鈕的優(yōu)化，可以給大家一定的啟發(fā)，以后不要沒有思路了！

來源 | 菜心設(shè)計(jì)鋪（ID：caixinshejipu）

作者 | 菜心設(shè)計(jì)鋪 ; 編輯 | 呼呼大睡

內(nèi)容僅代表作者獨(dú)立觀點(diǎn)，不代表早讀課立場