简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > CSSチュートリアル > 本文

CSS3 擬似クラスが 3D ボタンを作成する方法の分析例

黄舟
リリース： 2017-10-28 09:43:45
オリジナル
1326 人が閲覧しました

これは css3 疑似クラスによって実装された 3D ボタンです。HTML コードは次のとおりです: 

        <p id="container_buttons">
                    <p><a class="a_demo_three">点我！</a></p>
                    <p><a class="a_demo_three second_button">来嘛，别害怕！</a></p>
                    <p><a class="a_demo_three third_button">秋叶网络博客（www.mizuiren.com）</a></p>
        </p>
ログイン後にコピー

CSS コードは: 

   #container_buttons{cursor:pointer;}
   .a_demo_three {
            background-color:#3bb3e0;
       font-family: &#39;Open Sans&#39;, sans-serif;
            font-size:12px;
            text-decoration:none;
            color:#fff;
       position:relative;
       padding:10px 20px;
       border-left:solid 1px #2ab7ec;
       margin-left:35px;
       background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
       background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
       background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
       background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
       background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
       background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(44,160,202)),color-stop(1, rgb(62,184,229)));
       -webkit-border-top-right-radius: 5px;
       -webkit-border-bottom-right-radius: 5px;
       -moz-border-radius-topright: 5px;
       -moz-border-radius-bottomright: 5px;
       border-top-right-radius: 5px;
       border-bottom-right-radius: 5px;
       -webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
       -moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
       -o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
       box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
   }
   .a_demo_three:active {
       top:3px;
       background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
       background-image: -o-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
       background-image: -moz-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
       background-image: -webkit-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
       background-image: -ms-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
       background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(62,184,229)),color-stop(1, rgb(44,160,202)));
       -webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
       -moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
       -o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
       box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
   }
   .a_demo_three::before {
       text-align: center;
       line-height: 20px;
       background-color:#2561b4;
       content:"1";
       width:35px;
       max-height:26px;
       height:100%;
       position:absolute;
       display:block;
       padding-top:8px;
       top:0px;
       left:-36px;
       font-size:16px;
       font-weight:bold;
       color:#8fd1ea;
       text-shadow:1px 1px 0px #07526e;
       border-right:solid 1px #07526e;
       background-image: linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);
       background-image: -o-linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);
       background-image: -moz-linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);
       background-image: -webkit-linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);
       background-image: -ms-linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);
       background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(10,94,125)),color-stop(1, rgb(14,139,184)));
            -webkit-border-top-left-radius: 5px;
       -webkit-border-bottom-left-radius: 5px;
       -moz-border-radius-topleft: 5px;
       -moz-border-radius-bottomleft: 5px;
       border-top-left-radius: 5px;
       border-bottom-left-radius: 5px;
       -webkit-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;
       -moz-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;
       -o-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;
       box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;
   }
   #container_buttons{height:400px;line-height:50px;}
   #container_buttons p{margin:20px 10px;}
   .a_demo_three:active::before {
       top:-3px;
       -webkit-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;
       -moz-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;
       -o-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;
       box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;
   }
   .second_button::before {content:"2";}
   .third_button::before {content:"3";}
ログイン後にコピー

以上がCSS3 擬似クラスが 3D ボタンを作成する方法の分析例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
css3 事例分析
ソース：php.cn
前の記事：CSS3における「グラデーション」互換性ソリューションの詳細説明 次の記事：CSSの詳細を詳しく解説
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
3 レベル階層のカスタム分類を使用して woocommerce 関連製品を選択します 「スポーツ」というカスタム分類を持つ woocommerce ストアがあります。分類には、親、子、子という 3 つのレベルがあります。たとえば、屋内スポーツ > アリーナ ス...
から 2024-04-06 20:05:30
0
1
544
Web アプリケーションでバージョン情報を表示するためのベスト プラクティスは何ですか? Webアプリケーションを開発しています。 Web アプリケーションでバージョン情報を表示するためのベスト プラクティスは何ですか?私はセマンティック バージョニングを使用しており、...
から 2024-04-06 19:13:16
0
2
476
d3.js でズームインすると散布図のポイントの値が維持されない d3.js を使用するのは初めてなので、ご容赦ください。 vue.js ファイルに純粋な JavaScript として実装しました。ズーム機能を使用して散布図を作成しようとしていま...
から 2024-04-06 18:16:26
0
1
403
SCSSを使用してデフォルト値とCSS変数を生成する ウェブサイトのスタイリングを実装しています。レガシー サポートの理由から、少なくともしばらくの間は IE11 をサポートする必要があります。ワークフローと私の健全性の理由から、私は...
から 2024-04-06 17:46:54
0
1
355
Imagick、Adobe Photoshop、Windows の比較 - 解像度の検出 (1 センチメートルあたりのピクセル数またはインチあたりのピクセル数) これは質問ではなく、DPI がさまざまなファイル形式でどのように保存されるかについての理解を深め、なぜ DPI が機能するのかを議論する試みです。私は画像 (JPG、PNG、Tif...
から 2024-04-06 16:01:27
0
1
397
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！