グリッチ変換を修正するには：rotateX 3dボタン？

Question

#learn-more-button { 
 
    position: relative; 
 
    top: 69%; 
 
    margin: 0 auto; 
 
    padding-top: 18px; 
 
    width: 185px; 
 
    height: 38px; 
 
    background-color: #009ee3; 
 
    font-family: 'Montserrat', sans-serif; 
 
    font-size: 15px; 
 
    color: #fff; 
 
    font-weight: 400; 
 
    text-align: center; 
 
    letter-spacing: 2px; 
 
    transition: 0.85s; 
 
} 
 
#learn-more-button:hover { 
 
    /*box-sizing: border-box; 
 
    \t border-bottom: 5px solid #c42c50;*/ 
 
    -webkit-transform: rotateX(25deg); 
 
    transform: rotateX(25deg); 
 
    cursor: pointer; 
 
    border-bottom: 5px solid #0091c8; 
 
}

<div id="learn-more-button">Button</div>

私は、「詳細はこちら」のテキストとちょうど青、平らな長方形でボタンを作成しました。ホバリングしたときに、X軸を少し回転させ、わずかに暗いボトムボーダーにして、わずかに回転する薄いボックススタイルのボタンの錯覚を作成します。私の方法はうまくいきますが、（言葉の欠如のために）かなり "不便"なようです。試して説明するには、小さな白い線が境界線に2秒間表示され、回転が滑らかではありません。ウェブサイトはまだライブではありませんので、必要に応じてどのように表示するかわかりません。

Answer 1

box-shadowは、borderより少し上手に移行します。

いずれにしても、境界線のプロパティから5pxの境界（5pxの境界ではなく0pxの境界）に移行していたため、マウスアウト時にアニメーション化する代わりに境界が飛び出してしまいました。この場合、アニメーション化する前にボタンに0px box-shadowを追加したので、トランジションがスムーズになりました。

#learn-more-button { 
 
    position: relative; 
 
    top: 69%; 
 
    margin: 0 auto; 
 
    padding-top: 18px; 
 
    width: 185px; 
 
    height: 38px; 
 
    background-color: #009ee3; 
 
    font-family: 'Montserrat', sans-serif; 
 
    font-size: 15px; 
 
    color: #fff; 
 
    font-weight: 400; 
 
    text-align: center; 
 
    letter-spacing: 2px; 
 
    transition: 0.85s; 
 
    box-shadow: #0091c8 0 0 0; 
 
} 
 
#learn-more-button:hover { 
 
    /*box-sizing: border-box; 
 
    \t border-bottom: 5px solid #c42c50;*/ 
 
    -webkit-transform: rotateX(25deg); 
 
    transform: rotateX(25deg); 
 
    cursor: pointer; 
 
    box-shadow: #0091c8 0 5px 0; 
 
}

<div id="learn-more-button">Button</div>