1.Hover改變字體大小及背景透明度

HTML中配置fadeBtn類別名稱按鈕

<a href="#" class="fadeBtn">Button</a>

CSS設定按鈕大小及顏色

.fadebtn {
  width: 150px;
  height: 50px;
  line-height: 50px;
  color: #000;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  display: inline-block;
  overflow: hidden;
  background-color: #ddd;
  border: 2px solid #fff;
  box-shadow: 0 0 3px #555;
}

JQuery寫入效果

$('.fadebtn').hover(function(){
  $(this).stop().animate({opacity: '0.5',fontSize:'22px'},300);
},function(){
  $(this).stop().animate({opacity: '1' ,fontSize: '18px'},300);
});

2.Hover改變BorderRadius圓角

HTML中配置cssAnim類別名稱按鈕

<a href="#" class="cssAnim cssAnim2">Button</a>

CSS設定按鈕大小及顏色

.cssAnim {
  padding: 15px 0;
  width: 150px;
  color: #000;
  font-weight: bold;
  text-align: center;
  display: inline-block;
  overflow: hidden;
  background-color: #cfcfcf;
  border: 1px solid #999;
  transition: all 0.3s linear;
  margin-left: 0.6em;
}

.bdrRaidus {
  border-radius: 15px;
}

.bgColor {
  color: #fff;
  background: #000;
}

JQuery寫入效果

$('.cssAnim').hover(function(){
  $(this).addClass('bgColor');
},function(){
  $(this).removeClass('bgColor');
});

$('.cssAnim2').hover(function(){
  $(this).addClass('bdrRaidus');
},function(){
  $(this).removeClass('bdrRaidus');
});

3.Hover製造rotateX效果

HTML中配置cssAnim類別名稱按鈕

<a href="#" class="cssAnim cssAnim2">Button</a>

CSS設定X軸旋轉角度

.rotateX {
  transform: rotateX(360deg);
}

JQuery寫入效果

$('.cssAnim3').hover(function(){
  $(this).addClass('rotateX');
},function(){
  $(this).removeClass('rotateX');
});

4.Hover製造rotateY效果

HTML中配置cssAnim類別名稱按鈕

<a href="#" class="cssAnim cssAnim2">Button</a>

CSS設定Y軸旋轉角度

.rotateY {
  transform: rotateY(360deg);
}

JQuery寫入效果

$('.cssAnim3').hover(function(){
  $(this).addClass('rotateY');
},function(){
  $(this).removeClass('rotateY');
});

範例網址
https://codepen.io/amanda328/pen/OoMeZJ

以上為個人學習紀錄
參考書籍為外掛OUT!JQuery高手精技