[CSS] Transitioning Position

Buy Now! On Sale $59
a.btn.buy-button{
  position:relative;
  height:32px;
  line-height:32px;
  text-align:center;
  width:150px;
  color: white;
  background-color: #31AAD2;
  display:inline-block;
  padding: 5px 10px;
  border-radius: 5px;
  text-decoration:none;
  overflow:hidden;
}
span.content{
  position:absolute;
  left:10px;
}
span.top{
  top:0;
}
.btn:hover .top{
  top:-100px;
}
span.bottom{
  top:32px;
}
.btn:hover .bottom{
  top:0px;
}
.content{
  position:relative;
  transition: top 0.3s;
}

您可在此處留言

avatar

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料

  Subscribe  
Notify of