CSS懸停按鈕移動是一種非常流行的交互式設計技術，它可以讓網頁更加生動和富有活力。下面我將向大家介紹一些實現這種效果的CSS代碼。

.button{
position: relative;
display: inline-block;
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 18px;
font-weight: bold;
color: #fff;
background-color: #3498db;
cursor: pointer;
overflow:hidden;
}
.button:hover::before{
content:'';
position:absolute;
top:-50px;
left:0;
width:100%;
height:50px;
background:#000;
-webkit-transition: top 0.3s ease;
transition: top 0.3s ease;
}
.button:hover::after{
content:'';
position:absolute;
bottom:-50px;
left:0;
width:100%;
height:50px;
background:#000;
-webkit-transition: bottom 0.3s ease;
transition: bottom 0.3s ease;
}
.button:hover::before{
top:0;
}
.button:hover::after{
bottom:0;
}

這段CSS代碼將創建一個包含按鈕文本的DIV，然后使用偽元素實現懸停時的效果。其中，偽元素"::before"創建一個黑色背景的DIV并將其移動到按鈕頂部，偽元素"::after"則創建一個黑色背景的DIV并將其移動到按鈕底部。

最后，我希望讀者們可以通過這些CSS代碼，實現一個優美的懸停按鈕移動效果，讓網頁更加生動有趣。