十款精美的网页按钮设计

大气的模糊网页背景，加上精巧的幽灵按钮设计，瞬间使网页设计变身高大上，“薄”和“透”是这种设计的最大特色。不设底色不加纹理，按钮仅有一层薄薄的线框标明边界，确保了它作为按钮的功能性，又达成了“纤薄”的视觉美感。置于按钮之后的背景往往相对素雅，或加以纯色，或高斯模糊，或色调沉郁，这使得即使有按钮也不影响观看全图，背景得以呈现又不影响按钮的视觉表达，双方相互映衬而达成微妙的平衡。

下面是整理的十款精美的网页按钮设计案例：

1. NUJI

这款iOS APP的首页设计并未设计复杂的背景和纹理，仅是将iOS界面中的雨伞图片高度模糊化叠于底层，衬托出左侧的文字和透明按钮，以及右侧的iPhone与UI。几乎与文案同宽的大号透明按钮在此极为明显，如果用户对此APP有点兴趣，就不会错过按钮所链接的演示视频。

2. IUVO

IUVO的网页中不仅有多个线框按钮，而且配以多个使用线条勾勒出的简约线框图标，极大地丰富了页面设计。虚化了的远景和凝实清晰的近景相得益彰，也使得按钮和图标格外突出。同时，左侧的导航栏还使用了转场动画，使得整个页面活起来了。

3. PAPAYA

PAPAYA是一个功能型网站，你可以在此预订各种活动的门票。网页被横向一分为三，用以展示三个不同的活动，暗色调的背景使得黄色的时间和白色的事件显得明显而突出，视线下移就可以自然而然地看到购票按钮。上下字体一致，透明按钮框纤细而不喧宾夺主，赞。

4. CHARLES-AXEL PAUWELS

这个网页的设计正如上文所说，背景虚化，明度较低，突出了网站的前景视觉元素。线框Logo置于顶部，经过虚线分隔，突出中间的网站名称。大小字体对比，强化名称，而又说明了网站功能。最下方三个透明按钮则在你明确主题之后，提供了路径功能，让你作出选择，可谓一气呵成。

5. VISAGE

设计师在设计这个网页的时候，也遵循了文章开头所说的原则，不同的是，他所设计的透明按钮上添加了转场动画。当你将鼠标移动到按钮上的时候，按钮会自动放大，并且填充上相应的色彩，并且文字颜色出现反转，吸引用的眼球。这种对透明按钮的巧妙运用，值得学习。

6. THE DISTANCE

这个首页并没有使用虚化或者明度太低的背景，但是背景构图和整体色调非常简单整齐，下面三个霓虹色的透明按钮和背景里的店招相互辉映，活泼自然。

7. TRIPPEO

整个网页色调明亮清新，除了渐变的背景就是内容。高饱和度的蓝色背景里有点状的世界地图作为纹理点缀，使之不显得单调。大小错落的内容靠左对齐，最下方是透明按钮。

8. UNION ROOM

这个网站使用了视频作为背景，访问者只需要通过变化的背景就可以明白组织的工作流程。通过调色之后的背景视频并不影响前景的Logo、文字和透明按钮，整个网站显得巧妙而优雅。

9. CTEMF

虽然设计师选择了让文本来填充图片之外的地方，但是他依然让透明按钮置于页面的正下方最容易被发现的地方，这使得整个网页内容丰富，但是结构简单直观。

10. 20JEANS

这个网页的处理方式比较均衡，右侧的人物和灰色的墙体构成了背景，没有虚化没有淡化，黑色的字体和透明按钮在左侧与右侧的人物相互照应，与之前的网不一样的地方在于它并没有过度偏重内容，并且看起来很时尚。