コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > 純粋な css3_html/css_WEB-ITnose で実装されたフリップ ボタン

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

WBOY
リリース： 2016-06-24 11:57:35
オリジナル
1179 人が閲覧しました

以前、純粋な 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 コード:

りー

関連ラベル：
css3 ボタン フリップ
ソース：php.cn
前の記事：画像の表示と影付けを設定するときに、コードをクリックしても機能しません。何が起こっているのでしょうか? _html/css_WEB-ITnose 次の記事：水平方向の Web ページで水平方向のマウスホイールの動きを実装するにはどうすればよいですか? _html/css_WEB-ITnose
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
SQL groupbyが機能しないので、code_branchでグループ化したい ->select('a.statusasstatus','b.nameascustomer_name','e.nameasbranch_name','c.nameascomp...
から 2024-04-06 19:24:49
0
2
488
ループするために MySQL の結果を ID ごとにグループ化する mysqlにフライトデータを含むテーブルがあります。 codeigniter3Journey_idair_idFlightDurationout_or_inflightdurati...
から 2024-04-06 17:27:56
0
1
406
Javascript/Jqueryを使用してボタンなしでフォームを送信する JavaScript 関数を呼び出し、JQUERY/PHP を使用してフォームを実行することにより、ボタンのないフォームを送信しようとしています。ページを再読み込みせずに、バックエ...
から 2024-04-06 14:54:03
0
2
421
CSS Tailwind を使用した画像ホバー カード アニメーションが期待どおりに動作しません。 <html><body><divclass="groupcardmy-14mx-3w-80h-100bg-gray-800rounded-x...
から 2024-04-06 13:43:17
0
1
356
React でスリーステート スイッチングを実装する最良の方法は? React で、ある状態から次の状態への状態変更をトリガーするボタンをいくつか作成しています。ボタンの中には、列挙型で表される 3 つの状態を持つものもあります。これら 3 つの状...
から 2024-04-06 13:51:32
0
1
418
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート