网页常用的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; }

//这个地方比较重要。