HTML5是一種網頁設計語言，在網頁中使用HTML5可以實現很多有趣和實用的效果。其中之一就是按鈕彈出特效。下面我們給大家介紹一些HTML5按鈕彈出特效的代碼。

/* 按鈕彈出特效1 */ 
.button{ 
display: inline-block; 
position: relative; 
color: #FFF; 
background-color: #3498DB; 
padding: 10px 20px; 
border: none; 
margin: 0; 
font-size: 18px; 
font-weight: bold; 
border-radius: 5px; 
transition: all 0.5s; 
overflow: hidden; 
} 
.button:hover{ 
transform: translateY(-10px); 
} 
.button:hover:before{ 
transform: scale(10); 
opacity: 0; 
transition: all 0.5s; 
} 
.button:before{ 
content: ""; 
display: block; 
position: absolute; 
width: 100%; 
height: 100%; 
background-color: #737373; 
z-index: -1; 
transform: scale(0); 
} 
/* 按鈕彈出特效2 */ 
.btn{ 
position: relative; 
display: inline-block; 
padding: 10px; 
background: #3498DB; 
color: #fff; 
text-decoration: none; 
border-radius: 3px; 
text-align: center; 
overflow: hidden; 
transition: all 0.4s ease-in-out; 
border: none; 
font-size: 20px; 
} 
.btn span{ 
display: block; 
position: absolute; 
height: 100%; 
width: 100%; 
color: #fff; 
z-index: 1; 
transform: translateY(100%); 
transition: all 0.4s ease-in-out; 
} 
.btn:hover span{ 
transform: translateY(0); 
} 
.btn:before{ 
content: ""; 
position: absolute; 
z-index: -1; 
top: 0; 
left: 0; 
height: 100%; 
width: 100%; 
background-color: #333; 
transform: translateY(100%); 
} 
.btn:hover:before{ 
transform: translateY(0); 
}

以上就是兩個HTML5按鈕彈出特效的代碼，通過這些代碼可以實現很多類似的特效。想象力和創造力是無限的，只要善于發掘和利用，我們可以開發出更多更有趣的效果。希望本文的介紹可以對想學習HTML5的讀者有所幫助。