<div class="wrap"> 
  <a href="#" class="btn" data-tip="點擊作答">一個按鈕</a> 
</div>

.btn { 
  display: inline-block; 
  padding: 5px 20px; 
  border-radius: 4px; 
  background-color: #6495ed; 
  color: #fff; 
  font-size: 14px; 
  text-decoration: none; 
  text-align: center; 
  position: relative; 
} 
.btn::before { 
  content: attr(data-tip); 
  width: 80px; 
  padding: 5px 10px; 
  border-radius: 4px; 
  background-color: #000; 
  color: #ccc; 
  position: absolute; 
  top: -30px; 
  left: 50%; 
  transform: translate(-50%); 
  text-align: center; 
  opacity: 0; 
  transition: all .3s; 
} 
.btn::after { 
  content: ’’; 
  border: 8px solid transparent; 
  border-top: 8px solid #000; 
  position: absolute; 
  top: -3px; 
  left: 50%; 
  transform: translate(-50%);  
  opacity: 0; 
  transition: all .3s; 
} 
.btn:hover::before { 
  top: -40px; 
  opacity: 1; 
} 
.btn:hover::after { 
  top: -13px; 
  opacity: 1; 
}