CSS-简单的按钮设计 前言 在我们前端各种布局里，按钮是很十分常用的，与用户的各种交互，功能的实现等等，对于用户而言，一个实用又好看的按钮样式充满了趣味性，视觉上的享受也尤为重要。 一 . 颜色设计 首先我们来看普通的按钮：
image.png
然后我们对按钮中的文字加上红色（color：）：
image.png
这时这个红色的按钮看起来能够稍微有点辨识度。
加上背景颜色 如果给按钮加上背景颜色（background-color：）：
image.png
红色按钮看上去有种警示的作用，能让人意识到点击严重性而会多思考留意下。
image.png
绿色按钮看上去较为安全、正常，更容易被点击。
然后我们换种清新点的颜色（去除边框 margin：0）：
image.png
直角是不是给人有点严肃的感觉？那么我们就换种形状。
二 . 形状设计 从上蓝色按钮接起：
改变按钮形状 添加点圆角（border-radius：）：
image.png
变得稍微有些圆润有意思了，再增大数值：
image.png
这个更加好看好玩了。
如果原型是个正方形，加到100%：
image.png
此时感觉按钮过平。
三 . 添加阴影（box-shadow：） image.png
此时按钮显得立体。（有精力的话也可设计灰面，高光等部分）
四 . 使用渐变色（background: linear-gradient()） 这里我用浅蓝色渐变到淡紫色
image.png
加上一点阴影（没加好^_^）
image.png
五 . hover变色 当鼠标移到按钮上时，通常需要一个颜色变化给以用户反馈 首先可以是让按钮的背景颜色（background-color）变化为按钮颜色的浅色系或者是更深的颜色
image.png
image.png
如果按钮是渐变色，可以设置为让渐变的方向反向：
image.png
也可以换个渐变色：
image.png
达到一个变化明显的效果。
另外可以运用一个颜色的动画过渡效果。
六 . hover/visited变形 鼠标移到按钮或者按下去后，可以采用按钮变化形状的效果 可以调整按钮的宽高等属性，让其放大缩小：
image.png
可以调整border-radius的值，使按钮变圆变方：
image.png
也可以让box-shadow的值为0，去掉阴影：
image.png
七 . 根据页面布局 按钮的设计，很大程度上与页面整体有关。 可以采用对比的方式突出主要内容，页面方正可将按钮设置为圆润的形状，颜色与页面内容有较强对比度，大小也可以有一定对比。 也可以采用和页面统一协调的颜色形状和大小等 需求不同设计思路也不同
