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 ~~~~~~~~~~~~~~~