網頁常用的css特效讓互動留住客戶

一般網站如果制作按鈕，多做一些互動，可以讓客戶獲得更好的體驗。

例如滑鼠滑過按鈕，讓背景顔色從左往右滑出來（或者從右往左都可以）：

<a target="_blank" href="#" class="butn white"><span>觀衆預登記</span></a>

預設狀态的css：

.butn {
    background: #232323;
    color: #fff;
    text-align: center;
    border-radius: 4px;
    padding: 12px 30px;
    line-height: normal;
    font-weight: 500;
    text-transform: none !important;
    position: relative;
    z-index: 9999;
    display: inline-block;
    white-space: nowrap;
    border: none;
    cursor: pointer;
}      

.butn.white {
    background: #fff;
    color: #232323;
}      

.butn:after { content: ''; position: absolute; border-radius: 4px; bottom: 6px; left: 0; height: 2px; -webkit-transition: width .4s; -o-transition: width .4s; transition: all .4s; width: 0; background: #1EA59E; height: 100%; top: 0; z-index: 1; }
      

　　

//after僞類，不熟悉的同學，網上搜搜吧=。=（如果想讓背景從右往左滑出來，将left改成right）

滑鼠滑過css：

.butn.white:after {
    background: #232323;
    border-radius: 3px;
}      

.butn:hover:after { width: 100%; border-radius: 3px; }      

//這個地方比較重要。