CSS動圖是通過CSS3的transition和animation實現的。CSS動態按鈕可以讓網頁在交互上更加豐富，同時也可以提高用戶體驗。

.button {
display: inline-block;
position: relative;
padding: 10px 20px;
color: #fff;
text-decoration: none;
background-color: #007bff;
border-radius: 5px;
font-size: 16px;
line-height: 1.2;
overflow: hidden;
white-space: nowrap;
transition: all 0.3s ease;
}
.button:before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.2);
transform: skewX(-20deg);
transition: all 0.3s ease;
}
.button:hover:before {
left: 0;
}
.button:active {
transform: translateY(4px);
}
@keyframes gradient {
0% {
background-position: 0 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0 50%;
}
}
.button gradient-bg {
animation: gradient 3s ease infinite;
background: linear-gradient(45deg, #33bbff, #ff99cc);
background-size: 400% 400%;
}

上面的代碼就是一個簡單的動態按鈕的實現。通過:before偽類實現了懸停效果。在:hover偽類下，將:before的left屬性設置為0，實現按鈕的拉伸效果。同時，在:active偽類下，使按鈕稍微下移以顯示其被按下的效果。通過keyframes實現了漸變背景色的動畫效果。

總體來說，CSS動態按鈕可以不僅僅可以搭配表單使用，也可以實現網頁中更多的互動效果。