CSS3技術允許我們用鼠標滑動來展開元素，這為網頁設計師們提供了更多的創意空間。想要實現這個效果，需要用到CSS3中的: hover 和transition屬性。

/* 定義默認狀態下的按鈕樣式 */ 
.button { 
width: 200px; 
height: 50px; 
background-color: #008CBA; 
color: #fff; 
text-align: center; 
line-height: 50px; 
border-radius: 25px; 
cursor: pointer; 
overflow: hidden; 
} 
/* 定義按鈕被懸停時的效果 */ 
.button:hover { 
width: 300px; 
transition: width 0.5s ease-in-out; 
} 
/* 定義展開內容的樣式 */ 
.content { 
opacity: 0; 
width: 100%; 
height: 0; 
background-color: #008CBA; 
color: #fff; 
text-align: center; 
line-height: 50px; 
border-radius: 0 0 25px 25px; 
transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out; 
} 
/* 定義被懸停時展開內容的效果 */ 
.button:hover .content { 
height: 50px; 
opacity: 1; 
}

通過上述代碼，我們可以實現一個按鈕，當鼠標懸停時，展開相應的內容，給用戶更好的頁面體驗。在實際項目開發中，我們可以結合ajax等技術，實現更為復雜的交互效果。