在HTML中，按鈕是用來觸發某個操作的常用元素。但是如果想要增加按鈕的互動性和動態性，那么就需要添加一些動畫效果。下面是一些HTML按鈕的動畫效果代碼。

/* 圓形按鈕抖動效果 */
button {
position: relative;
z-index: 1;
overflow: hidden;
}
button:before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #8CF;
z-index: -1;
transition: all 0.2s ease-out;
transform: scaleX(0);
transform-origin: 50%;
}
button:hover:before {
transform: scaleX(1);
}
/* 矩形按鈕呼吸效果 */
button {
position: relative;
}
button:before {
content: "";
position: absolute;
top: -10px;
right: -10px;
bottom: -10px;
left: -10px;
background-color: rgba(0, 0, 0, 0.2);
z-index: -1;
border-radius: 5px;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
button:hover:before {
opacity: 1;
}
/* 三角形按鈕反彈效果 */
button {
position: relative;
overflow: hidden;
}
button:after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -20px;
width: 0;
height: 0;
border-top: 20px solid #8CF;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
transition: all 0.2s ease-out;
}
button:hover:after {
top: calc(100% + 10px);
}
/* 點擊按鈕顫抖效果 */
button {
position: relative;
z-index: 1;
}
button:active {
transform: translate3d(0, 0, 0);
}
button:before {
content: "";
position: absolute;
top: -2px;
right: -2px;
bottom: -2px;
left: -2px;
background-color: rgba(0, 0, 0, 0.2);
z-index: -1;
border-radius: 5px;
transition: transform 0.2s;
transform: scale(0.9);
transform-origin: center center;
}
button:active:before {
transform: scale(1.1);
}

以上代碼實現了四種不同的按鈕動畫效果，包括圓形按鈕抖動、矩形按鈕呼吸、三角形按鈕反彈和點擊按鈕顫抖效果。這些效果都可以通過CSS的偽類和過渡屬性來實現。如果您想要添加更多的按鈕動畫效果，可以在這里找到更多的靈感。