就一个按钮，还让我做的有设计感？这老板是不是有病啊！

如果你的老板让你把按钮做的有设计感，你肯定没啥思路，只会改颜色、圆角和字体大小，但今天你有福气了，给你介绍6种风格按钮，而且还带动效，设计感爆棚，效果依次如下：

1、渐变光环按钮动效

• 动效：渐变色环绕按钮，背景发光效果增强动感，吸引用户点击。

• 视觉亮点：简洁明了的文字设计和智能感的渐变效果，突出按钮的互动性和可操作性

2、双按钮滑动动效

• 动效：主按钮和副按钮贴合丝滑弹跳切换，引导用户进一步了解，增强视觉引导感。

• 视觉亮点：简洁的文字和主副按钮结合的设计，增强了按钮的趣味性

3、底色滑动切换按钮动效

• 动效：鼠标点击时，按钮填充色滑动切换，且背景厚度逐渐收回，给用户明确的点击反馈。

• 视觉亮点：大胆的对比色设计和清晰的字体，增强按钮的可点击性和视觉冲击力。

• 动效：鼠标悬停时，线框按钮增加亮色填充和厚度及线性星星图标，效果增添活力，吸引用户点击。

• 视觉亮点：明亮的绿色与黑色边框对比强烈，突出按钮的可点击性，文字简洁且突出。

5、扫光+字体线面切换按钮动效

• 动效：文本从左到右滑动，末尾箭头逐渐显现，强调后续操作引导。

• 视觉亮点：简洁的白色字体与黑色背景对比，文字线面性的切换，简洁而高级。

6、Q弹翻页按钮动效

• 动效：鼠标悬停时，按钮从边缘开始动态变化颜色，增加动态互动反馈。

• 视觉亮点：鲜亮的黄色与黑色边框设计，字体简洁清晰，突显联系信息的可点击性和重要性。

除了这种有风格的按钮，大家平时还会遇到一些，普通的按钮，老板让加设计感，但不知道怎么做的，今天也给大家来个小案例，比如下面这个卡片按钮，毫无设计感，如何解决呢？

第一步你可以把文字变成两排，让卡片按钮排版饱满：

第二步可以加个图形修饰，比如箭头，正好还解决了不知道可以点击的问题：

第三步，把文字和图形从纯黑色变成深棕色，让整体更佳融合：

第四步，给卡片加一点质感，更加有点击感，然后背景加一个淡黄色渐变：

再看下前后对比：

效果就好多了！

希望今天的6各种按钮风格和一个普通卡片按钮的优化，可以给大家一定的启发，以后不要没有思路了！

来源 | 菜心设计铺（ID：caixinshejipu）

作者 | 菜心设计铺 ; 编辑 | 呼呼大睡

内容仅代表作者独立观点，不代表早读课立场