CSS学习案例（8）（一）：闪亮按钮

	<a href="#">闪亮按钮</a>
    <a href="#">闪亮按钮</a>

*{margin: 0;padding:0;}
body{
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;
}

a{
    position: relative;
    background: #4d385b;
    text-decoration: none;
    color: #fff;
    padding: 12px 35px;
    margin: 30px;
    border-radius: 12px;
    border: 1px solid #130f36;
    overflow: hidden;
}
a:nth-of-type(1):hover{
    background: #ff2658;
}
a:nth-of-type(2):hover{
    background: #d68124;
}
a::before{
    content: '';
    background-image: linear-gradient(60deg,transparent,transparent,#fff,transparent,transparent);
    position: absolute;
    top: 0;left: -50%;
    width: 50%;height: 100%;
    transition:left 1s;
}
a:hover::before{
    left: 100%;
}

案例来源：学习：用HTML&CSS实现闪亮按钮