純粋な css3_html/css_WEB-ITnose で実装されたフリップ ボタン

以前、純粋な CSS3 で実装された美しいボタンをたくさん紹介しました。今日、編集者は純粋な CSS3 で実装された別のフリップ ボタンをネチズンと共有します。この実装では 2 つの反転効果が提供されます。1 つは中心線としてボタンの左端に基づいており、もう 1 つは中心線としてボタンの中央に基づいています。一緒にレンダリングを見てみましょう:

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

実装されたコード

html コード:

 <article>        <a target="_blank" class="btn-fold-1" href="http://www.w2bc.com"><span>Donate</span><span>to            RIF</span> </a>        <a target="_blank" class="btn-fold-2" href="http://www.w2bc.com"><span>Don</span><span>ate</span>        </a>    </article>

css3 コード:

りー