按钮

鼠标移入逐渐改变按钮背景颜色和边框颜色

1) Add HTML

<div class="button-wrap">
    <div class="button">按钮</div>
</div>

2) Add CSS

       /* 效果背景 */
       body{
           background-image: url(https://i.imgur.com/TYB2wkM.jpg);
           background-repeat: no-repeat;
           background-size: cover;
           padding-left: 200px;
           padding-top: 20px;
       }
       
       .button {
           width: 175px;
           height: 40px;
           background-color: rgba(0, 0, 0, 0.5);
           border: 1px solid transparent;
           padding: 10px 20px;
           box-sizing: border-box;
           text-align: center;
           font-size: 13px;
           color: #fff;
           cursor: pointer;
           transition: all 0.3s linear;
       }

       .button:hover {
           border: 1px solid #fff;
           background-color: rgba(0, 0, 0, 0.7);
           transition: background-color 300ms linear, border 300ms linear;
       }