この記事では、CSS3を使用したアニメーションボタンの作成に関するいくつかの実験を紹介します。 アイデアは、異なるスタイル、ホバー効果などでアニメーションリンクを作成することです。
これらの例では、 webiconset.comのアイコンとJust Be Niceのフォントを使用しています。
各例を見て、ボタンの状態が異なる場合のHTMLの構造とスタイルがどのように見えるかを確認します。
アニメーション/トランジションは、これらのCSS3プロパティをサポートするブラウザーでのみ機能することに注意してください。
レッスンでコードを散らかさないために、さまざまなブラウザーに接頭辞を使用しません。 アーカイブで例を参照できます。
例1
この例では、いくつかの要素を持つ大きなボタンを作成します。 アイコン、メインテキスト、右側の矢印、カーソルを移動したときにのみ表示される価格があります。
HTMLマークアップ
構造は非常に単純です：画像アイコンとspanタグの他の要素：
<a href="#" class="a-btn"> <span class="a-btn-slide-text">$29</span> <img src="images/icons/1.png" alt="Photos" /> <span class="a-btn-text"><small>Available on the Apple</small> App Store</span> <span class="a-btn-icon-right"><span></span></span> </a>
CSS
スタイルでは、ホバーでアニメーション化する要素に対してトランジションが正しく設定されていることを確認します。 価格は非表示になり、透明度を0に設定します。多くのボックスシャドウを使用すると、リアルな効果を作成できます。
.a-btn{ background: linear-gradient(top, #a9db80 0%,#96c56f 100%); padding-left: 90px; padding-right: 105px; height: 90px; display: inline-block; position: relative; border: 1px solid #80ab5d; box-shadow: 0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2); border-radius: 4px; float: left; clear: both; margin: 10px 0px; overflow: hidden; transition: box-shadow 0.3s ease-in-out; } .a-btn img{ position: absolute; left: 15px; top: 13px; border: none; transition: all 0.3s ease-in-out; } .a-btn .a-btn-slide-text{ position: absolute; font-size: 36px; top: 18px; left: 18px; color: #6d954e; opacity: 0; text-shadow: 0px 1px 1px rgba(255,255,255,0.4); transition: opacity 0.2s ease-in-out; } .a-btn-text{ padding-top: 13px; display: block; font-size: 30px; text-shadow: 0px -1px 1px #80ab5d; } .a-btn-text small{ display: block; font-size: 11px; letter-spacing: 1px; } .a-btn-icon-right{ position: absolute; right: 0px; top: 0px; height: 100%; width: 80px; border-left: 1px solid #80ab5d; box-shadow: 1px 0px 1px rgba(255,255,255,0.4) inset; } .a-btn-icon-right span{ width: 38px; height: 38px; opacity: 0.7; border-radius: 20px; position: absolute; left: 50%; top: 50%; margin: -20px 0px 0px -20px; border: 1px solid rgba(0,0,0,0.5); background: #4e5c50 url(../images/arrow_down.png) no-repeat center center; box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset, 0px 1px 2px rgba(255,255,255,0.5); transition: all 0.3s ease-in-out; }
ボタンにカーソルを合わせると、影が変わり、価格も表示され、画像が非表示になります。
.a-btn:hover{ box-shadow: 0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4); } .a-btn:hover img{ transform: scale(10); opacity: 0; } .a-btn:hover .a-btn-slide-text, .a-btn:hover .a-btn-icon-right span{ opacity: 1; }
アクティブ状態で、影を追加してボタンを押します。 右側の矢印アイコンが拡大されます。
.a-btn:active { position:relative; top:1px; background:#80ab5d; box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset; border-color: #a9db80; } .a-btn:active .a-btn-icon-right span{ transform: scale(1.4); }
例2
2番目の例は最初の例と非常によく似ていますが、新しい効果を追加するだけです。
HTMLマークアップ
この例のマークアップは、最初の例と同じです。
CSS
スタイルは最初の例とほぼ同じで、色を調整するだけです。 ただし、異なるホバー効果を行います。 価格が元のサイズに上がり、アイコンが消えます。 矢印の背景色を赤に変更します。
.a-btn:hover{ box-shadow: 0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4); } .a-btn:hover img{ opacity: 0; } .a-btn:hover .a-btn-slide-text{ opacity: 1; transform: scale(1); } .a-btn:hover .a-btn-icon-right span{ opacity: 1; background-color: #bc3532; }
アクティブ状態は、前の例と同じになります。 色を変えるだけです。 ボタンを押すと、矢印も回転します。
.a-btn:active { position: relative; top: 1px; background: #5d81ab; box-shadow: 1px 1px 2px rgba(0,0,0,0.4) inset; border-color: #80a9da; } .a-btn:active .a-btn-icon-right span{ transform: rotate(360deg); }
例3
この例では、まったく異なることをしようとします。 ボタンをホバーすると展開し、別のメッセージが表示されます。 矢印アイコンがわずかに回転します。
HTMLマークアップ
例3のマークアップは、前の例と少し異なります。 下にスライドするテキストは、クラス「a-btn-slide-text」のspanタグにあります。
<a href="#" class="a-btn"> <span class="a-btn-text">Register now</span> <span class="a-btn-slide-text">Get a promotion</span> <span class="a-btn-icon-right"><span></span></span> </a>
CSS
通常の状態では、ボタンには一定の高さがあります。ホバーすると追加のメッセージが表示され、アニメーション化されます。 追加のメッセージ「a-btn-slide-text」は絶対位置に配置され、ホバー時に高さを0から30ピクセルに増やします。
.a-btn{ background: linear-gradient(top, #feda71 0%,#febb4a 100%); border: 1px solid #f5b74e; border-color: #f5b74e #e5a73e #d6982f; box-shadow: 0 1px 1px #d3d3d3, inset 0 1px 0 #fee395; padding: 0px 80px 0px 10px; height: 38px; display: inline-block; position: relative; border-radius: 4px; float: left; margin: 10px; overflow: hidden; transition: all 0.3s linear; } .a-btn-text{ padding-top: 5px; display: block; font-size: 18px; white-space: nowrap; color: #996633; text-shadow: 0 1px 0 #fedd9b; transition: all 0.3s linear; } .a-btn-slide-text{ position:absolute; top: 35px; left: 0px; width: auto; right: 52px; height: 0px; background: #fff; color: #996633; font-size: 13px; white-space: nowrap; font-family: Georgia, serif; font-style: italic; text-indent: 15px; overflow: hidden; line-height: 30px; box-shadow: -1px 0px 1px rgba(255,255,255,0.4), 1px 1px 1px rgba(0,0,0,0.5) inset; transition: height 0.3s linear; } .a-btn-icon-right{ position: absolute; right: 0px; top: 0px; height: 100%; width: 52px; border-left: 1px solid #f5b74e; box-shadow: 1px 0px 1px rgba(255,255,255,0.4) inset; } .a-btn-icon-right span{ width: 38px; height: 38px; opacity: 0.7; position: absolute; left: 50%; top: 50%; margin: -20px 0px 0px -20px; background: transparent url(../images/arrow_right.png) no-repeat 50% 55%; transition: all 0.3s linear; }
ホバリングするとき、ボタンと追加のテキストの高さを変更します。 また、矢印アイコンを45度回転します。
.a-btn:hover{ height: 65px; box-shadow: 0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4); } .a-btn:hover .a-btn-text{ text-shadow: 0px 1px 1px rgba(0,0,0,0.2); color: #fff; } .a-btn:hover .a-btn-slide-text{ height: 30px; } .a-btn:hover .a-btn-icon-right span{ opacity: 1; transform: rotate(-45deg); }
アクティブ状態では、ボタンが少し移動して色が変わるため、ボタンが押されたように見えます。
.a-btn:active { position:relative; top:1px; background: linear-gradient(top, #fec354 0%,#fecd61 100%); /* W3C */ border-color: #d29a3a #cc9436 #c89133; text-shadow: 0 1px 0 #fee1a0; box-shadow: 0 1px 1px #d4d4d4, inset 0 1px 0 #fed17e; }
例4
例4では、前の例のように追加のメッセージを転送しますが、右側でそれを行います。 ボタンはそれ自体の中でメッセージを開くように見えます。
HTMLマークアップ
この例のマークアップは、前の例と同じです。
CSS
ボタンのスタイルは前の例と似ています。 追加テキストの色と位置のみを変更します。
.a-btn{ background: linear-gradient(top, #80a9da 0%,#6f97c5 100%); padding-left: 20px; padding-right: 80px; height: 38px; display: inline-block; position: relative; border: 1px solid #5d81ab; box-shadow: 0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5); border-radius: 20px; float: left; clear: both; margin: 10px 0px; overflow: hidden; transition: all 0.3s linear; } .a-btn-text{ padding-top: 5px; display: block; font-size: 18px; white-space: nowrap; text-shadow: 0px 1px 1px rgba(255,255,255,0.3); color: #446388; transition: all 0.2s linear; } .a-btn-slide-text{ position:absolute; height: 100%; top: 0px; right: 52px; width: 0px; background: #63707e; text-shadow: 0px -1px 1px #363f49; color: #fff; font-size: 18px; white-space: nowrap; text-transform: uppercase; text-align: left; text-indent: 10px; overflow: hidden; line-height: 38px; box-shadow: -1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset; transition: width 0.3s linear; } .a-btn-icon-right{ position: absolute; right: 0px; top: 0px; height: 100%; width: 52px; border-left: 1px solid #5d81ab; box-shadow: 1px 0px 1px rgba(255,255,255,0.4) inset; } .a-btn-icon-right span{ width: 38px; height: 38px; opacity: 0.7; position: absolute; left: 50%; top: 50%; margin: -20px 0px 0px -20px; background: transparent url(../images/arrow_right.png) no-repeat 50% 55%; transition: all 0.3s linear; }
ホバリングするとき、クラス「a-btn-slide-text」のスパンタグの幅と同様に、右側のパディングボタンを増やします。
.a-btn:hover{ padding-right: 180px; box-shadow: 0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2); } .a-btn:hover .a-btn-text{ text-shadow: 0px 1px 1px #5d81ab; color: #fff; } .a-btn:hover .a-btn-slide-text{ width: 100px; } .a-btn:hover .a-btn-icon-right span{ opacity: 1; }
アクティブな状態で、影で押す効果を作成します。
.a-btn:active { position: relative; top: 1px; background: #5d81ab; box-shadow: 1px 1px 2px rgba(0,0,0,0.4) inset; border-color: #80a9da; }
例5
この例では、アイコンに文字フォントを使用します。 アイデアは、次の効果を作成することです。マウスの上にカーソルを置くと、アイコンが消え、移動する矢印が表示されます。
HTMLマークアップ
構造は、リンク内の4つのスパンタグで構成されます。 クラス「a-btn-slide-icon」をスパンすると、矢印がアニメーション化され、上から下に移動します。
<a href="#" class="a-btn"> <span class="a-btn-symbol">Z</span> <span class="a-btn-text">Download Now</span> <span class="a-btn-slide-text">Windows Vista / Windows 7</span> <span class="a-btn-slide-icon"></span> </a>
CSS
フォントを使用して左側にアイコンを表示するため、このフォントを接続する必要があります。
上部の値を-30pxに設定して、矢印を非表示にします。
@font-face { font-family: 'WebSymbolsRegular'; src: url('websymbols/websymbols-regular-webfont.eot'); src: url('websymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'), url('websymbols/websymbols-regular-webfont.woff') format('woff'), url('websymbols/websymbols-regular-webfont.ttf') format('truetype'), url('websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg'); font-weight: normal; font-style: normal; } .a-btn{ border-radius: 50px; padding: 10px 30px 10px 70px; position: relative; float:left; display: block; overflow: hidden; margin: 10px; background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 74%,rgba(237,237,237,1) 100%); box-shadow: 0px 0px 7px rgba(0,0,0,0.2), 0px 0px 0px 1px rgba(188,188,188,0.1); transition: box-shadow 0.3s ease-in-out; } .a-btn-symbol{ font-family: 'WebSymbolsRegular', cursive; color: #555; font-size: 20px; text-shadow: 1px 1px 2px rgba(255,255,255,0.5); position:absolute; left: 20px; line-height: 32px; transition: opacity 0.3s ease-in-out; } .a-btn-text{ font-size: 20px; color: #d7565b; line-height: 16px; font-weight: bold; font-family: "Myriad Pro", "Trebuchet MS", sans-serif; text-shadow: 1px 1px 2px rgba(255,255,255,0.5); display: block; } .a-btn-slide-text{ font-family: Arial, sans-serif; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: #555; text-shadow: 0px 1px 1px rgba(255,255,255,0.9); } .a-btn-slide-icon{ position:absolute; top:-30px; width: 22px; height: 22px; background: transparent url(../images/arrow_down_black.png) no-repeat top left; left:20px; opacity: 0.4; }
ホバーすると、左側のアイコンが非表示になり、矢印のアニメーションが際限なく再生されます。
.a-btn:hover{ background: #fff; box-shadow: 0px 0px 9px rgba(0,0,0,0.4), 0px 0px 0px 1px rgba(188,188,188,0.1); } .a-btn:hover .a-btn-symbol{ opacity: 0; } .a-btn:hover .a-btn-slide-icon{ -webkit-animation: slideDown 0.9s linear infinite; }
ボタンをクリックすると、赤になり、影を追加してクリックの効果を作成します。
.a-btn:active{ background: #d7565b; box-shadow: 0px 2px 2px rgba(0,0,0,0.6) inset, 0px 0px 0px 1px rgba(188,188,188,0.1); } .a-btn:active .a-btn-text{ color: #fff; text-shadow: 0px 1px 1px rgba(0,0,0,0.3); } .a-btn:active .a-btn-slide-text{ color: rgba(0,0,0,0.4); text-shadow: none; }
最後に、矢印を上から下に移動する簡単なアニメーション：
@keyframes slideDown { 0% { top: -30px; } 100% { top: 80px;} }
実施例6
この例では、アスタリスクを含む丸いボタンを作成します。 ホバリング時に星を回転させ（わずかな勢いで）、追加のテキストを表示します。
HTMLマークアップ
リンクボタンに3つのspanタグがあります。 後者には、ホバー時に表示される非表示のテキストが含まれます。
<a href="#" class="a-btn"> <span></span> <span>Sign up</span> <span>It's free!</span> </a>
CSS
この例では、nth-childと少し遊んでみます。 スパンタグは3つあるので、.a-btnスパン：nth-child（1）、. a-btnスパン：nth-child（2）、. a-btn span：nth-子（3）。
ボタンを丸くして、異常な影を追加します。 メインテキストを垂直方向に中央揃えするには、表示をテーブルセルに設定します。 星と非表示のテキストは絶対に配置されます。
.a-btn{ width: 120px; height: 120px; border-radius: 50%; display: block; margin: 20px; float: left; background: #f0ad4e; position: relative; box-shadow: 0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff, 0px 0px 1px 8px rgba(188, 188, 188, 0.4), 0px 0px 0px 9px #fff; transition: all 0.3s linear; } .a-btn span{ display: table-cell; width: 80px; height: 80px; padding: 20px; text-align: center; vertical-align: middle; font-size: 26px; color: #fff; text-shadow: 0px 1px 1px #A03F16; font-family: "Arvo", "Myriad Pro", "Trebuchet MS", sans-serif; transition: all 0.3s linear; } .a-btn span:nth-child(1), .a-btn span:nth-child(3){ position: absolute; top: 0px; left: 0px; font-size: 40px; line-height: 36px; opacity: 0; } .a-btn span:nth-child(1){ background: transparent url(../images/star.png) no-repeat center center; opacity: 0.2; }
ホバー時に、ボタンの影を上げて浮かび上がらせます。 非表示のテキストが表示され、最初のテキストにアニメーションが適用されます。 また、星に回転アニメーションを適用します。
.a-btn:hover{ background: rgba(170, 77, 27, 0.6); box-shadow: 0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff, 1px 4px 5px 8px rgba(188, 188, 188, 0.6), 0px 0px 0px 9px #fff; } .a-btn:hover span:nth-child(3){ opacity: 1; } .a-btn:hover span:nth-child(2){ transform: scale(0); opacity: 0; } .a-btn:hover span:nth-child(1){ animation: rotate 1s linear; }
次に、ボタンをクリックしたときにボタンを押したと想定します。
.a-btn:active{ box-shadow: 0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff, 0px -1px 0px 8px rgba(188, 188, 188, 0.3), 0px 0px 0px 10px #fff; } .a-btn:active span:nth-child(2){ color: rgba(170, 77, 27, 0.8); text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.6); }
回転/リップルのアニメーションは次のとおりです。
@-webkit-keyframes rotate{ 0% { transform: scale(1) rotate(0);} 50% { transform: scale(0.5) rotate(180deg);} 100% { transform: scale(1) rotate(360deg);} }
実施例7
最後の例では、クールな影を使用して擬似3Dボタンを作成します。
HTMLマークアップ
構造は、5番目の例と同じです。
CSS
スタイルも例5と非常によく似ており、いくつかの色と影を変更するだけです。
.a-btn{ border-radius: 10px; padding: 10px 30px 10px 70px; position: relative; float:left; display: block; overflow: hidden; margin: 10px; background: linear-gradient(top, #b7f2f4 0%,#7ce7ea 100%); border: 1px solid #90c6c8; border-color: #90c6c8 #78bdc0 #65b6ba; box-shadow: 0px -5px 0px 0px #458a8c, 0 1px 1px #d5d5d5, 0 1px 0 rgba(255,255,255,0.8) inset; transition: all 0.2s linear; } .a-btn-symbol{ font-family: 'WebSymbolsRegular', cursive; color: #437b7d; text-shadow: 0 1px 0 #bef3f5; font-size: 20px; position:absolute; left: 20px; width: 20px; text-align: center; line-height: 32px; transition: all 0.3s ease-in-out; } .a-btn-text{ font-size: 20px; color: #437b7d; text-shadow: 0 1px 0 #bef3f5; line-height: 16px; font-weight: bold; font-family: "Myriad Pro", "Trebuchet MS", sans-serif; display: block; } .a-btn-slide-text{ font-family: Arial, sans-serif; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: #555; text-shadow: 0px 1px 1px rgba(255,255,255,0.9); }
ホバリングするとき、ボタンを増やして小さなアイコンを回転させます：
.a-btn:hover{ transform: scale(1.05); } .a-btn:hover .a-btn-symbol{ opacity: 0.5; transform: rotate(360deg); }
ボタンをクリックすると、ボタンを小さくしてクリックし、影を変更します。
.a-btn:active{ transform: scale(0.95); box-shadow: 0px 0px 0px 1px #458a8c, 0 1px 1px #d5d5d5, inset 0 1px 0 rgba(255,255,255,0.8), 0px 1px 1px 2px #fff; }
以上です！ CSS3を使用したクレイジーボタンの作成を楽しんでいただき、実験のインスピレーションを得たと思います。
PS CSS3アニメーションに関する以前の記事は、 こちらとこちらでご覧いただけ ます 。
サンプルファイルをダウンロードする