按鈕效果
當鼠標懸停按鈕上時，文字向左滑動，並且在右側箭頭從右向左滑出
當鼠標再次離開按鈕時，文字向右滑動回原位置，並且右側滑出箭頭向右隱藏
附上過渡效果代碼
<head>
<meta charset="UTF-8">
<title>按鈕顯示箭頭動畫transition過度</title>
<style>
.button{
border:none;
background-color:red;
color:white;
padding:15px 20px;
font-size:15px;
cursor:pointer;
border-radius:5px;
width:150px;
}
.button span{
position: relative;
display: inline-block;
transition: .5s;
}
.button span::after{
content: "»";
opacity:0;
right:-20px;
position: absolute;
transition: .5s;
}
.button:hover span{
padding-right: 25px;
}
.button:hover span:after{
opacity: 1;
right: 0;
}
</style>
</head>
<body>
<button class="button"><span>我是按鈕</span></button>
</body>
