一個小小的按鈕在一個網(wǎng)頁中擔當著很重要的角色，它帶領(lǐng)我們從一個頁面到達另一個頁面，是我們?yōu)g覽網(wǎng)站時的有力橋梁。一座好的橋梁不僅能為用戶帶來舒適的過渡，也許還能為你的網(wǎng)站加分不少。AnyForWeb曾在《2014年全球網(wǎng)站設(shè)計的15個趨勢》中提到，扁平化和極簡主義的設(shè)計風格是最近較為流行的設(shè)計趨勢。試想一下，如果將這兩種時下大熱的設(shè)計理念共同運用到小小的網(wǎng)站按鈕設(shè)計中去，究竟會呈現(xiàn)出怎樣的效果?

透明的按鈕設(shè)計其實在國外的網(wǎng)頁設(shè)計中很早就出現(xiàn)了，還被國外的設(shè)計師們俏皮的稱為“幽靈按鈕”(Ghost Buttons)。說到幽靈，我們的第一印象就是輕薄且透明，這也正是“幽靈按鈕”的精髓所在。沒有底色和紋理的渲染，只有一層簡單到極致的線框與外界劃分，若再加以高斯模糊的大圖背景，這兩者似乎是天造地設(shè)的組合搭配。

“幽靈按鈕”在國外的網(wǎng)站中十分普遍，但在國內(nèi)的運用并不多見，而國內(nèi)知名的在線業(yè)務(wù)解決方案服務(wù)商AnyForWeb在設(shè)計中融入了“幽靈按鈕”的理念，以下是AnyForWeb的“幽靈按鈕”作品。

1.AnyForWeb將透明線框的極簡理念首先融入了搜索框中，優(yōu)美的線條和漸變的色彩，讓整個界面更優(yōu)雅。“搜索”按鍵更是掙脫了所有線框的束縛，搭配海洋和島嶼的背景大圖，讓頁面看起來自由美好。

2.模糊的背景界面和“幽靈按鈕”之間擦出來不一樣的火花。以下案例是由AnyForWeb自主研發(fā)的Kangaroo CMS的登陸頁面。繁忙的城市背景被蓋上一層朦朧的色彩，再疊加清晰的透明線框按鈕，讓頁面整體妙不可言。

3.這是AnyForWeb為Shang Yoga設(shè)計的官方網(wǎng)站的一小部分。網(wǎng)站的整體基調(diào)與瑜伽的感覺十分吻合，“幽靈按鈕”的設(shè)計體現(xiàn)了瑜伽運動的恬靜簡單。

另外，AnyForWeb同時也為大家匯總了國外網(wǎng)站中的“幽靈按鈕”典型案例，供點評參考。

1.這個網(wǎng)站的登錄方式全部采用了“幽靈按鈕”的手法，輸入框與“sign up”字樣融合在一起，頂部的第三方登錄按鈕甚至去除了邊框的限制，背景也選擇了十分簡單的畫面，把極簡主義風格發(fā)揮到每一處細節(jié)。

2. Huemor Designs無論是從創(chuàng)始人身上或是網(wǎng)站本身，都不難發(fā)現(xiàn)他們天馬行空的特性。由此可見，創(chuàng)造性的機構(gòu)也能選擇“幽靈按鈕”，再配合網(wǎng)站的視差滾動技術(shù)和一些精致可愛的效果，讓網(wǎng)站在小清新中還透出俏皮。

3.Lander的網(wǎng)站證實了全局扁平化的設(shè)計和“幽靈按鈕”的配搭的確達到了我們預(yù)期的效果。網(wǎng)站整體感覺就好比一個快樂的孩童，充滿童真，活潑乖巧。純色背景和透明線框按鈕互相映襯，形成了一種微妙的平衡舒適感。

4.EXPOSURE使用了比較懷舊的高清大圖作為背景，白色的文字和按鈕配合偏黑色系的背景，形成鮮明的對比反差，帶給瀏覽者一種舒適的視覺沖擊。

5.JET EDGE是一家私人航空公司，背景理所當然的使用了從飛機舷窗內(nèi)拍攝的照片。但與大多情況不同的是，背景圖片并沒有被虛化，這也使整個網(wǎng)頁顯得更豐富，而網(wǎng)站中的“幽靈按鈕”設(shè)計則增添了瀏覽者的點擊欲望。

6.Reader MX是一個在線文章閱讀優(yōu)化的分享工具，以悠閑生活、愜意閱讀為理念，并且將這一理念也融入了網(wǎng)站中。右側(cè)的按鈕甚至拋棄了僅有的線框，把“幽靈按鈕”的輕薄透的特質(zhì)發(fā)揮到極致。

7.Adventive所用的背景圖片既使用了不夠簡單干凈的圖片，并且加入了紋理的點綴，也沒有進行虛化，但看起來仍然沒有十分繁瑣復(fù)雜的感覺，這都要歸功于按鈕和字體的幫助。字體顏色選用了與圖片色調(diào)同一色系的白色和藍色，重點內(nèi)容加粗顯示，按鈕設(shè)計與文字內(nèi)容盡量靠近，這樣的布局方法也讓網(wǎng)頁省去了空間。

8.以下這個案例采用了比較保守的做法，用全黑作為背景，加以明亮色的“幽靈按鈕”設(shè)計，讓按鈕在整個網(wǎng)頁中顯得格外突出，整體感覺時尚中不失優(yōu)雅。

9. Involvio是一個為跟蹤了解各大校園中發(fā)生的事件而建立的網(wǎng)站，用戶當然以學生為主。所以網(wǎng)站很貼切的使用了校園景象的視頻作為背景，全局使用扁平化設(shè)計和透明線框按鈕的手法，再加以清新的色彩，更加襯托出了學生們青春活潑的特點。

“幽靈按鈕”設(shè)計手法在國外的網(wǎng)站設(shè)計中并不少見，這樣的設(shè)計既高大上，又是未來大勢所趨，并且能夠簡單操作，難道你還不心動嗎?