幽靈按鈕：
也叫透明按鈕，顧名思義，也就是在設計網頁中的按鈕時，不在設計復雜色彩、樣式、和紋理，而是外僅以線框示意輪廓，內只用文字示意功能，背景透出，與整個頁面/背景合而為一的設計方式。國外的設計師稱之為“幽靈按鈕”（Ghost Buttons），盛贊這種按鈕通透簡約，貼合整體風格又不失神韻，別具魅力。這種按鈕的設計早已有之，但是在ios和安卓雙雙風格轉向之后，成了網頁設計的新趨勢，擁有類似設計的網頁設計作品如雨后春筍一般，映入眼簾。

下面是我用html css jQuery 簡單做得一個幽靈按鍵。

首先是body內容

<div class="box"><div id="mission" class="link link-mission" >　　<span class="icon"></span><a href="#" class="button" data-text=" MY missoin is clear "><span class="line line-top"></span><span class="line line-left"></span><span class="line line-right"></span><span class="line line-bottom"></span>MISSION<img src="arrow.png" class="arrow" alt="arrow"></a></div><div id="play" class="link link-play" ><span class="icon"></span><a href="#" class="button" data-text="This is my playground"><span class="line line-top"></span><span class="line line-left"></span><span class="line line-right"></span><span class="line line-bottom"></span>PLAY<img src="arrow.png" class="arrow" alt="arrow"></a></div><div id="touch" class="link link-touch"><span class="icon"></span><a href="#" class="button" data-text="Lets do something together"><span class="line line-top"></span><span class="line line-left"></span><span class="line line-right"></span><span class="line line-bottom"></span>TOUCH<img src="arrow.png" class="arrow" alt="arrow"></a></div><div class="tooltip"><em></em><span></span></div></div>

?

這個圖片是實現之后的截圖 ， 上方有三個div 分別存放這三塊內容，最后一個div是當鼠標懸浮在圖片下邊的按鈕上時顯現出來的一個tip。當鼠標放到上面三個圖片上時，這三個圖片會旋轉360度，并且會稍微放大一點，當鼠標移入下面的按鈕時，按鈕的四個角會有四條線出現并移動到按鈕的四條邊上，并且按鈕中的箭頭會向右移動微小距離。

接下來是樣式的設計，css代碼

/*樣式的初始化*/ * {margin: 0;padding: 0; }body {background-color: #333; } /*設置整個盒子*/ .box {width: 1000px;height: 220px;margin: 200px auto; } /*設置三塊內容的公共樣式*/ .box .link {width: 200px;height: 300px;float: left;margin-left: 100px; } /*旋轉圖標樣式*/ .box .link .icon {width: 200px;height: 150px;display: block;margin-bottom: 50px;background-repeat: no-repeat;background-position: center center;transition: 0.4s linear;-webkit-transition: 0.4s linear;-moz-transition: 0.4s linear;-o-transition: 0.4s linear; } .box .link-mission .icon {background-image: url(missoin2.png);} .box .link-play .icon {background-image: url(play2.png); } .box .link-touch .icon {background-image: url(touch2.png);} .box .link .icon:hover {transform:rotate(360deg) scale(1.2);-webkit-transform:rotate(360deg) scale(1.2);-moz-transform:rotate(360deg) scale(1.2);-o-transform:rotate(360deg) scale(1.2); }/*方塊按鈕樣式*/ .box .link .button {position: relative;display: block;width: 200px;height: 50px;line-height: 50px;font-size: 25px;box-sizing: border-box;padding-left: 10px;text-decoration: none;color: #2ecc71;border: 2px solid rgba(255,255,255,.6); } .box .link .button .arrow {position: absolute;right:20px;width: 50px;height: 50px;transition: 0.1s linear; } .box .link .button:hover {border: :2px solid rgba(255,255,255,0); } .box .link .button:hover .arrow {right: 5px; } .box .link .button .line {position: absolute;display: block;background:none;transition: 0.4s ease;-webkit-transition: 0.4s ease; }.box .link .button .line-top {left: -100%;top: -2px;width: 0;height: 2px; } .box .link .button:hover .line-top {width: 200px;left: -2px;background-color: #ffffff; }.box .link .button .line-bottom {right: -100%;bottom: -2px;width: 0;height: 2px; } .box .link .button:hover .line-bottom {width: 200px;right: -2px;background-color: #ffffff; }.box .link .button .line-left {left: -2px;bottom: -100%;width: 2px;height: 0; } .box .link .button:hover .line-left {bottom: -2px;height: 50px;background-color: #ffffff; }.box .link .button .line-right {right: -2px;top: -100%;width: 2px;height: 0; } .box .link .button:hover .line-right {top: -2px;height: 50px;background-color: #ffffff; }/*懸浮在按鈕上時上面出現的提示框的樣式*/ .box .tooltip {position: absolute;width: auto;padding: 0 15px;height: 35px;line-height: 35px;background-color: #2dcb70;font-size: 18px;color: #ffffff;border-radius: 5px;display: none; } .box .tooltip span {position: absolute;display: block;width: 0;height: 0;border: 8px solid transparent;border-top-color:#2dcb70;left: 50%; margin-left: -8px; }

css樣式的設計我就不細說的，哪一塊代碼設計哪里的樣式都注釋上了

最后就是jQuery代碼了

$(function(){$(".button").mouseenter(function(){var tiptext = $(this).attr("data-text"); //動態獲取內容并添加到tooltip的em中// console.log(tiptext);$(".tooltip em").text(tiptext);var leftLoc = $(this).offset().left;var cutLeft = ($(".tooltip").outerWidth()-$(this).outerWidth())/2; //計算上面懸浮塊與下面按鈕寬度之差，方便將懸浮塊放到按鈕的正中間$(".tooltip").css({left:leftLoc - cutLeft,top:300,display:"block"}).animate({top:350,},30)}).mouseleave(function(){$(".tooltip").css({display:"none"});});})

是不是很簡單，記得在編寫jQuery代碼前先引入jQuery哦，好了今天就到這里了。

轉載于:https://www.cnblogs.com/huzhuo/p/7463977.html

總結

以上是生活随笔為你收集整理的幽灵按键的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。