6 つのクールな CSS3 ボタンの境界線アニメーション効果_html/css_WEB-ITnose

これは非常にクールな CSS3 ボタンの境界線アニメーション効果です。このボタン境界アニメーションのセットには 6 つの異なる効果があります。マウスをボタン上でスライドさせると、ボタンの境界線がさまざまな方法でアニメーション化し、その効果は非常にクールです。

オンライン プレビュー ソース コードのダウンロード

使い方

HTML 構造

この CSS3 ボタン境界アニメーション特殊効果のボタンは、HTML の bb9345e55eb71822850ff156dfde57c8 要素を使用して作成されています。さまざまな効果が標準外であり、異なるクラスに設定されています。たとえば、最初のエフェクトのクラスはdrawです。

<button class="draw">draw</button>       

CSS スタイル

CSS スタイルでは、まずボタンの基本スタイルをいくつか設定し、ネイティブ ボタンのスタイルを削除します。

button {  background: none;  border: 0;  box-sizing: border-box;  box-shadow: inset 0 0 0 2px #f45e61;  color: #f45e61;  font-size: inherit;  font-weight: 700;  margin: 1em;  padding: 1em 2em;  text-align: center;  text-transform: capitalize;  position: relative;  vertical-align: middle;}button::before, button::after {  box-sizing: border-box;  content: '';  position: absolute;  width: 100%;  height: 100%;}            

以上がラインアニメーション効果を作成する最初の方法です。他の効果のCSSコードについては、ダウンロードファイルを参照してください。