幽灵按钮（按钮过渡，纯css）

鼠标经过按钮样式改变，动画过渡

HTML部分：

<div class="wrap">
        <div class="top"></div>
        <div class="bottom"></div>
        幽灵按钮
</div>

CSS部分：

		* {
            margin: 0;
            padding: 0
        }

        .wrap {
            width: 300px;
            margin: 50px auto;
            height: 80px;
            line-height: 80px;
            text-align: center;
            color: #fff;
            background-color: #105069;
            font-size: 36px;
            font-weight: bold;
            position: relative;
            transition: 1s;
        }

        .wrap .top,
        .wrap .bottom {
            width: 0;
            height: 5px;
            background-color: #105069;
            position: absolute;
            transition: 1s;
        }

        .wrap .top {
            top: 0;
            left: 0
        }

        .wrap .bottom {
            bottom: 0;
            right: 0
        }

        .wrap:hover .top,
        .wrap:hover .bottom{
            width: 100%;
        }

        .wrap:hover {
            background-color: #15afc7;
            color: #105069;
        }

js实现 利用鼠标经过移出（去掉css中:hover部分的代码）

		window.onload = function () {
            var wrap = document.querySelector(".wrap");
            var divs = wrap.getElementsByTagName('div');
            wrap.onmouseover = function () {
                divs[0].style.width = "100%";
                divs[1].style.width = "100%";
                wrap.style.backgroundColor = "#15afc7";
                wrap.style.color = "#105069";
            };
            wrap.onmouseout = function () {
                divs[0].style.width = 0;
                divs[1].style.width = 0;
                wrap.style.backgroundColor = "#105069";
                wrap.style.color = "#fff";
            }
        }