css3按钮好看的特效(二)

css3按钮好看的特效(二)

先让我们看一下按钮特效二的效果：

在碰上去的时候发光且由梯形变成了长方形。需要合理的理解运用到before和after。

先看看按钮的元素结构，简简单单的一个a标签里面套着一个展现字体内容的span。

 <a href="#" class="playlight">
    <span class="play">ENJOY THE GAME</span>
 </a>

这是触碰前的元素展现图

是如何出现一个倒梯形

给before添加
 left: -6px;
 transform: skew(15deg);
 transition: all 0.3s ease;
给after添加
 right: -6px;
 transform: skew(-15deg);
 transition: all 0.3s ease;

css如下

.play{
  position: relative;
    display: block;
    margin: auto;
    width: 140px;
    height: 46px;
    background-color: #ff7a21;
    color:#fff;
    text-align: center;
    line-height: 46px;
    font-size: 12px;
    transition: all 0.3s ease;
}
.play::before{
    content: '';
    box-sizing: border-box;
    position: absolute;
    left: -6px;
    top: 0px;
    width: 20px;
    height: 100%;
    background: #ff7a21;
    transform: skew(15deg);
    transition: all 0.3s ease;
}
.play::after{
    content: '';
    position: absolute;
    right: -6px;
    top: 0px;
    width: 20px;
    height: 100%;
    background: #ff7a21;
    transform: skew(-15deg);
    transition: all 0.3s ease;
}
 .playlight{
   display: block;
    margin: auto;
    width: 152px;
    height: 46px;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

重点是如何实现hover：

1.当碰到a标签时候加上橙色的box-shadow（0px 0px 30px 0px #ff7a21, 0px 0px 30px 0px #ff7a21）

.playlight:hover{
    text-decoration: none;
    box-shadow:  0px 0px 30px 0px #ff7a21, 0px 0px 30px 0px #ff7a21;
}

2.同样改变里面span的字体和背景

.playlight:hover .play:hover{
    color: #ff7a21;
    background-color: #fff;
}

3.当a标签被碰到时候同时改变里面span标签的两个伪类的transform: skew(0deg)，让两个如上面展现图所展现的两个梯形变回长方形，背景颜色也变为和span标签一样的背景色。

.playlight:hover .play:hover:before,.playlight:hover .play:hover:after{
    background-color: #fff;
    transform: skew(0deg);
}

~~~~~~~~~~~~~~~~~~ end ~~~~~~~~~~~~~~~