こんにちは友人。 過去1か月にわたって、特にボタンを作成する際に使用する擬似要素を試しました。 したがって、以前はスプライトでしか実行できなかったクールな効果を作成できました。
このチュートリアルでは、アンカータグとCSSのパワーのみを使用して、ひねりを加えたボタンを作成する方法を示します。
フォントは、 Steve Mattsonによる「Open Sans」です。
免責事項
これらの例ではCSSプレフィックスを使用しませんが、ソースファイルでCSSプレフィックスを見つけます。
Firefoxのみが擬似要素でサポートしているため、transitionプロパティは使用しませんでした。 さらに、ボタンは使用しなくてもうまく機能すると考えています。
マークアップ
すべてのボタンの操作には、アンカーだけが便利です。他のすべての要素は、前に擬似クラス::を使用して作成します。
<a href="#" class="a_demo_one"> Click me! </a>
最初の例
これは単純なCSSで行う最も簡単な例だと思います。
スタイル
まず、通常のアクティブな状態のボタンの基本スタイルを設定します。 ボタンが相対的に配置されていることに注意してください。 これは、要素の前に::を配置するときに役立ちます。
.a_demo_one { background-color:#ba2323; padding:10px; position:relative; font-family: 'Open Sans', sans-serif; font-size:12px; text-decoration:none; color:#fff; border: solid 1px #831212; background-image: linear-gradient(bottom, rgb(171,27,27) 0%, rgb(212,51,51) 100%); border-radius: 5px; } .a_demo_one:active { padding-bottom:9px; padding-left:10px; padding-right:10px; padding-top:11px; top:1px; background-image: linear-gradient(bottom, rgb(171,27,27) 100%, rgb(212,51,51) 0%); }
疑似要素の前に::を使用して、ボタンの周りに灰色のコンテナーを作成します。 絶対配置は、要素自体を配置するときに私たちの生活を楽にします。
.a_demo_one::before { background-color:#ccd0d5; content:""; display:block; position:absolute; width:100%; height:100%; padding:8px; left:-8px; top:-8px; z-index:-1; border-radius: 5px; box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff; }
2番目の例
この例は、3D効果により少し複雑です。 最初は、ボタンはコンテナの外側にあり、クリックするとダウンします。
.a_demo_two { background-color:#6fba26; padding:10px; position:relative; font-family: 'Open Sans', sans-serif; font-size:12px; text-decoration:none; color:#fff; background-image: linear-gradient(bottom, rgb(100,170,30) 0%, rgb(129,212,51) 100%); box-shadow: inset 0px 1px 0px #b2f17f, 0px 6px 0px #3d6f0d; border-radius: 5px; } .a_demo_two:active { top:7px; background-image: linear-gradient(bottom, rgb(100,170,30) 100%, rgb(129,212,51) 0%); box-shadow: inset 0px 1px 0px #b2f17f, inset 0px -1px 0px #3d6f0d; color: #156785; text-shadow: 0px 1px 1px rgba(255,255,255,0.3); background: rgb(44,160,202); }
スタイル
しかし、ここではより複雑です：
擬似要素の位置は親要素に依存するため、親要素をいくつかのピクセルで移動する場合、擬似要素は同じピクセル数だけ反対方向に移動する必要があります。
.a_demo_two::before { background-color:#072239; content:""; display:block; position:absolute; width:100%; height:100%; padding-left:2px; padding-right:2px; padding-bottom:4px; left:-2px; top:5px; z-index:-1; border-radius: 6px; box-shadow: 0px 1px 0px #fff; } .a_demo_two:active::before { top:-2px; }
3番目の例
作成する前にボタンがなかったため、これは私のお気に入りのボタンの1つです。 人々は本当に彼女が好きなようです。 このボタンは2つの部分に分かれており、クリックすると「壊れる」ようになります。
スタイル
繰り返しますが、簡単な部分から始めましょう。 ここにインデントが表示されていることに注意してください。 ボタンを中央に配置する必要がある場合は、擬似要素の幅を補正する必要があります。 必要ない場合は、インデントを省略できます。
.a_demo_three { background-color:#3bb3e0; font-family: 'Open Sans', 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%); border-top-right-radius: 5px; border-bottom-right-radius: 5px; 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%); box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999; }
擬似要素に移りましょう：
.a_demo_three::before { content:"·"; width:35px; max-height:29px; 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%); border-top-left-radius: 5px; border-bottom-left-radius: 5px; box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ; } .a_demo_three:active::before { top:-3px; 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 ; }
4番目の例
今回は、背景画像を使用して矢印の擬似要素を使用します。 画像の代わりに、これらのフォントアイコンを使用することもできます 。
スタイル
.a_demo_four { background-color:#4b3f39; font-family: 'Open Sans', sans-serif; font-size:12px; text-decoration:none; color:#fff; position:relative; padding:10px 20px; padding-right:50px; background-image: linear-gradient(bottom, rgb(62,51,46) 0%, rgb(101,86,78) 100%); border-radius: 5px; box-shadow: inset 0px 1px 0px #9e8d84, 0px 5px 0px 0px #322620, 0px 10px 5px #999; } .a_demo_four:active { top:3px; background-image: linear-gradient(bottom, rgb(62,51,46) 100%, rgb(101,86,78) 0%); box-shadow: inset 0px 1px 0px #9e8d84, 0px 2px 0px 0px #322620, 0px 5px 3px #999; } .a_demo_four::before { background-color:#322620; background-image:url(../images/right_arrow.png); background-repeat:no-repeat; background-position:center center; content:""; width:20px; height:20px; position:absolute; right:15px; top:50%; margin-top:-9px; border-radius: 50%; box-shadow: inset 0px 1px 0px #19120f, 0px 1px 0px #827066; } .a_demo_four:active::before { top:50%; margin-top:-12px; box-shadow: inset 0px 1px 0px #827066, 0px 3px 0px #19120f, 0px 6px 3px #382e29; }
5番目の例
この例はあまりクールではありませんが、必要に応じて変更できます。
スタイル
.a_demo_five { background-color:#9827d3; width:150px; display:inline-block; font-family: 'Open Sans', sans-serif; font-size:12px; text-decoration:none; color:#fff; position:relative; margin-top:40px; padding-bottom:10px; padding-top:10px; background-image: linear-gradient(bottom, rgb(168,48,232) 100%, rgb(141,32,196) 0%); border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; box-shadow: inset 0px 1px 0px #ca73f8, 0px 5px 0px 0px #6a1099, 0px 10px 5px #999; } .a_demo_five:active { top:3px; background-image: linear-gradient(bottom, rgb(168,48,232) 0%, rgb(141,32,196) 100%); box-shadow: inset 0px 4px 1px #7215a3, 0px 2px 0px 0px #6a1099, 0px 5px 3px #999; } .a_demo_five::before { background-color:#fff; background-image:url(../images/heart.gif); background-repeat:no-repeat; background-position:center center; border-left:solid 1px #CCC; border-top:solid 1px #CCC; border-right:solid 1px #CCC; content:""; width:148px; height:40px; position:absolute; top:-30px; left:0px; margin-top:-11px; z-index:-1; border-top-left-radius: 5px; border-top-right-radius: 5px; } .a_demo_five:active::before { top: -33px; box-shadow: 0px 3px 0px #ccc; }
結論として
まあ、それだけです。 これらのボタンの作成は実験であることを忘れないでください。そのため、すべてのブラウザで正しく表示されるわけではありません。
このチュートリアルを読んでくれてありがとう、それがあなたの役に立つことを願っています。
デモンストレーション | ソースコード