さまざまなデザインのボタンを最小限のHTMLで実装する、HTML5とCSS3のテクニックのまとめ

サイト構築 -CSS

Post on:2017年5月16日

sponsors

デザイン効率化の新常識！Illustratorの生成塗りつぶし（シェイプ）の活用テクニック Adobe Firefly Camp 2024年11月22日金曜日開催 20時から21時

HTMLはシンプルに最小限、26種類のさまざまなデザインのボタンを実装されたコレクションを紹介します。

ボタンのスタイルはSASSを使用してコンポーネントベース生成されており、さまざまなボタンのデザインをモジュール式で簡単に利用できます。

Buttons
Buttons -GitHub

ここで紹介するボタンのHTMLはすべて、共通です。
classを変更するだけで、簡単にデザインを変更できます。

<button class="btn btn-primary">Button</button>

1	<button class="btn btn-primary">Button</button>

ボタンはマテリアルデザインのカラー、グレースケール、選択不可状態があり、サイズはSmall, Regular, Mediun, Largeが用意されています。

Alpha
フラットデザインのボタン。

.alpha .btn{display:inline-block;margin:6px;font-size:inherit;line-height:1.42;padding:0.8em 1.6em;font-weight:normal;border-width:0;border-style:solid;background:transparent;border-radius:0.2666666667em;cursor:pointer;font-family:"Booster Next FY", "Avenir Next", Avenir, sans-serif;user-select:none;vertical-align:bottom;transition:box-shadow 0.2s, transform 0.2s, color 0.2s}
.alpha .btn:hover{box-shadow:0 2px 12px rgba(0, 0, 0, 0.5)}
.alpha .btn:active{transform:translateY(3px)}

.alpha .btn-primary{box-shadow:0 3px 0 0 #367f14, 0 4px 4px -1px rgba(0, 0, 0, 0.6), 0 4px 6px 1px rgba(0, 0, 0, 0.3), 0 1px 2px 1px transparent inset, 0 18px 32px -2px rgba(255, 255, 255, 0.1) inset;background-color:#52C11F;background-image:linear-gradient(-45deg, #52C11F, #7ccc14);color:#E6EAEF}
.alpha .btn-primary:hover{box-shadow:0 3px 0 0 #367f14, 0 6px 4px -1px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.5), 0 1px 2px 1px transparent inset, 0 18px 32px -2px rgba(255, 255, 255, 0.14) inset}
.alpha .btn-primary:active{box-shadow:0 0 0 0 #2d6911, 0 3px 0 0 transparent, 0 4px 16px transparent, 0 1px 2px 1px rgba(0, 0, 0, 0.5) inset, 0 -18px 32px -2px rgba(255, 255, 255, 0.1) inset;transition:0s;color:#367f14;text-shadow:0 1px 0 rgba(255, 255, 255, 0.3)}

.alpha .btn{display:inline-block;margin:6px;font-size:inherit;line-height:1.42;padding:0.8em 1.6em;font-weight:normal;border-width:0;border-style:solid;background:transparent;border-radius:0.2666666667em;cursor:pointer;font-family:"Booster Next FY", "Avenir Next", Avenir, sans-serif;user-select:none;vertical-align:bottom;transition:box-shadow 0.2s, transform 0.2s, color 0.2s}

.alpha .btn:hover{box-shadow:0 2px 12px rgba(0, 0, 0, 0.5)}

.alpha .btn:active{transform:translateY(3px)}

.alpha .btn-primary{box-shadow:0 3px 0 0 #367f14, 0 4px 4px -1px rgba(0, 0, 0, 0.6), 0 4px 6px 1px rgba(0, 0, 0, 0.3), 0 1px 2px 1px transparent inset, 0 18px 32px -2px rgba(255, 255, 255, 0.1) inset;background-color:#52C11F;background-image:linear-gradient(-45deg, #52C11F, #7ccc14);color:#E6EAEF}

.alpha .btn-primary:hover{box-shadow:0 3px 0 0 #367f14, 0 6px 4px -1px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.5), 0 1px 2px 1px transparent inset, 0 18px 32px -2px rgba(255, 255, 255, 0.14) inset}

.alpha .btn-primary:active{box-shadow:0 0 0 0 #2d6911, 0 3px 0 0 transparent, 0 4px 16px transparent, 0 1px 2px 1px rgba(0, 0, 0, 0.5) inset, 0 -18px 32px -2px rgba(255, 255, 255, 0.1) inset;transition:0s;color:#367f14;text-shadow:0 1px 0 rgba(255, 255, 255, 0.3)}

Beta
CSS3の最初のステップ。

.beta .btn{display:inline-block;margin:6px;font-size:inherit;line-height:1.42;padding:0.35em 0.8em;font-weight:normal;border-width:1px;border-style:solid;background:transparent;border-radius:0.2em;cursor:pointer;font-family:"Booster Next FY", "Avenir Next", Avenir, sans-serif;user-select:none;vertical-align:bottom;border-style:solid}

.beta .btn-primary{background-color:#52C11F;background-image:linear-gradient(0deg, #3f9518, #6ade35);color:#E6EAEF;border-color:#3f9518;text-shadow:0 1px 1px #2d6911}
.beta .btn-primary:hover{background-image:linear-gradient(0deg, #3f9518, #52C11F)}
.beta .btn-primary:active{background-color:#49ab1b;background-image:linear-gradient(180deg, #3c8c17, #3f9518);color:#23530d;text-shadow:0 1px 1px #6ade35;transition:0s}
.beta .btn-primary:focus{border-color:#2d6911}

.beta .btn{display:inline-block;margin:6px;font-size:inherit;line-height:1.42;padding:0.35em 0.8em;font-weight:normal;border-width:1px;border-style:solid;background:transparent;border-radius:0.2em;cursor:pointer;font-family:"Booster Next FY", "Avenir Next", Avenir, sans-serif;user-select:none;vertical-align:bottom;border-style:solid}

.beta .btn-primary{background-color:#52C11F;background-image:linear-gradient(0deg, #3f9518, #6ade35);color:#E6EAEF;border-color:#3f9518;text-shadow:0 1px 1px #2d6911}

.beta .btn-primary:hover{background-image:linear-gradient(0deg, #3f9518, #52C11F)}

.beta .btn-primary:active{background-color:#49ab1b;background-image:linear-gradient(180deg, #3c8c17, #3f9518);color:#23530d;text-shadow:0 1px 1px #6ade35;transition:0s}

.beta .btn-primary:focus{border-color:#2d6911}

Gamma
キャンディのようなかわいいボタン。

.gamma .btn{display:inline-block;margin:6px;font-size:inherit;line-height:1.42;padding:0.3em 1.1em;font-weight:normal;border-width:1px;border-style:solid;background:transparent;border-radius:1.01em;cursor:pointer;font-family:"Booster Next FY", "Avenir Next", Avenir, sans-serif;user-select:none;vertical-align:bottom;box-shadow:0 1px 1px 0 rgba(255, 255, 255, 0.2) inset}

.gamma .btn-primary{color:#E6EAEF;background-color:#52C11F;background-image:linear-gradient(0deg, #52C11F, #59d322);border-color:#3f9518}
.gamma .btn-primary:hover{background-color:#4baf1c;background-image:linear-gradient(0deg, #4baf1c, #52C11F)}
.gamma .btn-primary:active{background-color:#47a71b;background-image:linear-gradient(0deg, #45a21a, #4cb41d);box-shadow:0 1px 3px -1px rgba(0, 0, 0, 0.4) inset}

.gamma .btn{display:inline-block;margin:6px;font-size:inherit;line-height:1.42;padding:0.3em 1.1em;font-weight:normal;border-width:1px;border-style:solid;background:transparent;border-radius:1.01em;cursor:pointer;font-family:"Booster Next FY", "Avenir Next", Avenir, sans-serif;user-select:none;vertical-align:bottom;box-shadow:0 1px 1px 0 rgba(255, 255, 255, 0.2) inset}

.gamma .btn-primary{color:#E6EAEF;background-color:#52C11F;background-image:linear-gradient(0deg, #52C11F, #59d322);border-color:#3f9518}

.gamma .btn-primary:hover{background-color:#4baf1c;background-image:linear-gradient(0deg, #4baf1c, #52C11F)}

.gamma .btn-primary:active{background-color:#47a71b;background-image:linear-gradient(0deg, #45a21a, #4cb41d);box-shadow:0 1px 3px -1px rgba(0, 0, 0, 0.4) inset}

Delta
少し光沢があるボタン、フラットとは異なります。

.delta .btn{display:inline-block;margin:6px;font-size:inherit;line-height:1.42;padding:0.6em 1.6em;font-weight:normal;border-width:1px;border-style:solid;background:transparent;border-radius:0.25em;cursor:pointer;font-family:"Booster Next FY", "Avenir Next", Avenir, sans-serif;user-select:none;vertical-align:bottom;background-color:transparent;border-width:1px;border-style:solid;box-shadow:0 1.31em 0 0 rgba(255, 255, 255, 0.1) inset;transition:box-shadow 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), border-color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1)}
.delta .btn:active{box-shadow:0 1.31em 0.2em 0 rgba(0, 0, 0, 0.08) inset;transition:box-shadow 0.1s}

.delta .btn-primary{background-color:#52C11F;background-image:linear-gradient(-45deg, #52C11F, #7ccc14);color:#E6EAEF;border-top-color:#8ae660;border-left-color:#5ddb23;border-right-color:#5ddb23;border-bottom-color:#2d6911}
.delta .btn-primary:hover{background-image:linear-gradient(-45deg, #56ca20, #82d515)}
.delta .btn-primary:active{color:#2d6911;text-shadow:0 1px 0 rgba(255, 255, 255, 0.2);background-color:#4eb81e;background-image:linear-gradient(-45deg, #4eb81e, #76c313);border-top-color:#2d6911;border-left-color:#47a71b;border-right-color:#47a71b;border-bottom-color:#47a71b}

.delta .btn{display:inline-block;margin:6px;font-size:inherit;line-height:1.42;padding:0.6em 1.6em;font-weight:normal;border-width:1px;border-style:solid;background:transparent;border-radius:0.25em;cursor:pointer;font-family:"Booster Next FY", "Avenir Next", Avenir, sans-serif;user-select:none;vertical-align:bottom;background-color:transparent;border-width:1px;border-style:solid;box-shadow:0 1.31em 0 0 rgba(255, 255, 255, 0.1) inset;transition:box-shadow 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), border-color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1)}

.delta .btn:active{box-shadow:0 1.31em 0.2em 0 rgba(0, 0, 0, 0.08) inset;transition:box-shadow 0.1s}

.delta .btn-primary{background-color:#52C11F;background-image:linear-gradient(-45deg, #52C11F, #7ccc14);color:#E6EAEF;border-top-color:#8ae660;border-left-color:#5ddb23;border-right-color:#5ddb23;border-bottom-color:#2d6911}

.delta .btn-primary:hover{background-image:linear-gradient(-45deg, #56ca20, #82d515)}

.delta .btn-primary:active{color:#2d6911;text-shadow:0 1px 0 rgba(255, 255, 255, 0.2);background-color:#4eb81e;background-image:linear-gradient(-45deg, #4eb81e, #76c313);border-top-color:#2d6911;border-left-color:#47a71b;border-right-color:#47a71b;border-bottom-color:#47a71b}

Epsilon
いかにも押せそうなスキューモーフィズムなボタンのデザイン。

.epsilon .btn{display:inline-block;margin:6px;font-size:inherit;line-height:1.42;padding:0.6em 2.5em;font-weight:normal;border-width:0;border-style:solid;background:transparent;border-radius:1.31em;cursor:pointer;font-family:"Booster Next FY", "Avenir Next", Avenir, sans-serif;user-select:none;vertical-align:bottom;transition:box-shadow 0.15s, transform 0.15s, color 0.15s}
.epsilon .btn:active{transform:translateY(2px)}

.epsilon .btn-primary{background-color:#52C11F;background-image:linear-gradient(0deg, #439e19, #52C11F, #5bd723);color:#E6EAEF;box-shadow:0 2px 0 0 #2d6911, 0 1.31em 2em 0 rgba(255, 255, 255, 0) inset, 0 2px 1px 0 rgba(255, 255, 255, 0.1) inset, 0 2px 3px 1px rgba(0, 0, 0, 0.4), 0 0 12px 1px rgba(82, 193, 31, 0.5), 0 2px 1px -1px transparent inset}
.epsilon .btn-primary:hover{box-shadow:0 2px 0 0 #2d6911, 0 1.31em 1em 0 rgba(255, 255, 255, 0.05) inset, 0 2px 1px 0 rgba(255, 255, 255, 0.15) inset, 0 2px 3px 1px rgba(0, 0, 0, 0.6), 0 0 10px 1px rgba(82, 193, 31, 0.4), 0 2px 1px -1px transparent inset}
.epsilon .btn-primary:active{background-color:#49ab1b;background-image:linear-gradient(180deg, #3f9518, #4baf1c);color:#2d6911;transition:0s;box-shadow:0 0 0 0 #23530d, 0 1.31em 1em 0 rgba(255, 255, 255, 0.05) inset, 0 2px 2px 0 rgba(255, 255, 255, 0) inset, 0 1px 4px 0 transparent, 0 0 10px 1px rgba(82, 193, 31, 0.1), 0 2px 2px -1px rgba(0, 0, 0, 0.7) inset;text-shadow:0 1px 0 rgba(255, 255, 255, 0.2)}

.epsilon .btn{display:inline-block;margin:6px;font-size:inherit;line-height:1.42;padding:0.6em 2.5em;font-weight:normal;border-width:0;border-style:solid;background:transparent;border-radius:1.31em;cursor:pointer;font-family:"Booster Next FY", "Avenir Next", Avenir, sans-serif;user-select:none;vertical-align:bottom;transition:box-shadow 0.15s, transform 0.15s, color 0.15s}

.epsilon .btn:active{transform:translateY(2px)}

.epsilon .btn-primary{background-color:#52C11F;background-image:linear-gradient(0deg, #439e19, #52C11F, #5bd723);color:#E6EAEF;box-shadow:0 2px 0 0 #2d6911, 0 1.31em 2em 0 rgba(255, 255, 255, 0) inset, 0 2px 1px 0 rgba(255, 255, 255, 0.1) inset, 0 2px 3px 1px rgba(0, 0, 0, 0.4), 0 0 12px 1px rgba(82, 193, 31, 0.5), 0 2px 1px -1px transparent inset}

.epsilon .btn-primary:hover{box-shadow:0 2px 0 0 #2d6911, 0 1.31em 1em 0 rgba(255, 255, 255, 0.05) inset, 0 2px 1px 0 rgba(255, 255, 255, 0.15) inset, 0 2px 3px 1px rgba(0, 0, 0, 0.6), 0 0 10px 1px rgba(82, 193, 31, 0.4), 0 2px 1px -1px transparent inset}

.epsilon .btn-primary:active{background-color:#49ab1b;background-image:linear-gradient(180deg, #3f9518, #4baf1c);color:#2d6911;transition:0s;box-shadow:0 0 0 0 #23530d, 0 1.31em 1em 0 rgba(255, 255, 255, 0.05) inset, 0 2px 2px 0 rgba(255, 255, 255, 0) inset, 0 1px 4px 0 transparent, 0 0 10px 1px rgba(82, 193, 31, 0.1), 0 2px 2px -1px rgba(0, 0, 0, 0.7) inset;text-shadow:0 1px 0 rgba(255, 255, 255, 0.2)}

Zeta
Fにインスパイアを受けたボタン。

.zeta .btn{display:inline-block;margin:6px;font-size:inherit;line-height:1.42;padding:0.2em 0.6em;font-weight:normal;border-width:1px;border-style:solid;background:transparent;border-radius:0;cursor:pointer;font-family:"Booster Next FY", "Avenir Next", Avenir, sans-serif;user-select:none;vertical-align:bottom;box-shadow:0 1px 0 0 rgba(255, 255, 255, 0.2) inset, 0 1px 3px 0 rgba(0, 0, 0, 0.4)}
.zeta .btn:active{box-shadow:0 2px 4px -2px rgba(0, 0, 0, 0.2) inset, 0 1px 3px 0 rgba(0, 0, 0, 0.1)}

.zeta .btn-primary{color:#E6EAEF;background-color:#52C11F;background-image:linear-gradient(0deg, #3f9518, #56ca20);border-color:#2d6911}
.zeta .btn-primary:active{background-image:linear-gradient(0deg, #3f9518, #47a71b)}

.zeta .btn{display:inline-block;margin:6px;font-size:inherit;line-height:1.42;padding:0.2em 0.6em;font-weight:normal;border-width:1px;border-style:solid;background:transparent;border-radius:0;cursor:pointer;font-family:"Booster Next FY", "Avenir Next", Avenir, sans-serif;user-select:none;vertical-align:bottom;box-shadow:0 1px 0 0 rgba(255, 255, 255, 0.2) inset, 0 1px 3px 0 rgba(0, 0, 0, 0.4)}

.zeta .btn:active{box-shadow:0 2px 4px -2px rgba(0, 0, 0, 0.2) inset, 0 1px 3px 0 rgba(0, 0, 0, 0.1)}

.zeta .btn-primary{color:#E6EAEF;background-color:#52C11F;background-image:linear-gradient(0deg, #3f9518, #56ca20);border-color:#2d6911}

.zeta .btn-primary:active{background-image:linear-gradient(0deg, #3f9518, #47a71b)}

Eta
光沢のあるグロッサリーのボタン。

.eta .btn{display:inline-block;margin:6px;font-size:inherit;line-height:1.42;padding:0.5em 1.8em;font-weight:normal;border-width:2px;border-style:solid;background:transparent;border-radius:0.2em;cursor:pointer;font-family:"Booster Next FY", "Avenir Next", Avenir, sans-serif;user-select:none;vertical-align:bottom;position:relative;overflow:hidden;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.2);transition:box-shadow 0.4s cubic-bezier(0.23, 1, 0.32, 1)}
.eta .btn:active{text-shadow:0 1px 0 rgba(255, 255, 255, 0.2);transition-duration:0.2s}
.eta .btn:active:after{background-image:linear-gradient(-90deg, rgba(255, 255, 255, 0.02) 20%, rgba(255, 255, 255, 0))}
.eta .btn:after{content:'';display:block;position:absolute;top:0;left:0;height:100%;width:100%;transform:rotate(-19deg) translateY(-1.3em) scale(1.05);filter: blur(1px);background-image:linear-gradient(-90deg, rgba(255, 255, 255, 0.12) 20%, rgba(255, 255, 255, 0))}

.eta .btn-primary{background-color:#52C11F;color:#E6EAEF;border-color:#439e19;border-bottom-color:#347b14;box-shadow:0 1px 1px -1px rgba(255, 255, 255, 0.9) inset, 0 40px 20px -20px rgba(255, 255, 255, 0.15) inset, 0 -1px 1px -1px rgba(0, 0, 0, 0.7) inset, 0 -40px 20px -20px rgba(0, 0, 0, 0.06) inset, 0 9px 8px -4px rgba(0, 0, 0, 0.4), 0 2px 1px -1px rgba(0, 0, 0, 0.3), 7px 7px 8px -4px rgba(0, 0, 0, 0.1), -7px 7px 8px -4px rgba(0, 0, 0, 0.1), 0 -4px 12px 2px rgba(91, 215, 35, 0.2)}
.eta .btn-primary:hover{background-color:#59d322}
.eta .btn-primary:active{box-shadow:0 -1px 1px -1px rgba(255, 255, 255, 0.4) inset, 0 -40px 20px -20px rgba(255, 255, 255, 0.1) inset, 0 1px 1px -1px rgba(0, 0, 0, 0.7) inset, 0 40px 20px -20px rgba(0, 0, 0, 0.06) inset, 0 7px 8px -4px rgba(0, 0, 0, 0.4), 0 2px 1px -1px rgba(0, 0, 0, 0.2), 7px 7px 8px -4px rgba(0, 0, 0, 0.05), -7px 7px 8px -4px rgba(0, 0, 0, 0.05), 0 -4px 12px 2px rgba(91, 215, 35, 0.1);background-color:#4baf1c;color:#307212}

.eta .btn{display:inline-block;margin:6px;font-size:inherit;line-height:1.42;padding:0.5em 1.8em;font-weight:normal;border-width:2px;border-style:solid;background:transparent;border-radius:0.2em;cursor:pointer;font-family:"Booster Next FY", "Avenir Next", Avenir, sans-serif;user-select:none;vertical-align:bottom;position:relative;overflow:hidden;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.2);transition:box-shadow 0.4s cubic-bezier(0.23, 1, 0.32, 1)}

.eta .btn:active{text-shadow:0 1px 0 rgba(255, 255, 255, 0.2);transition-duration:0.2s}

.eta .btn:active:after{background-image:linear-gradient(-90deg, rgba(255, 255, 255, 0.02) 20%, rgba(255, 255, 255, 0))}

.eta .btn:after{content:'';display:block;position:absolute;top:0;left:0;height:100%;width:100%;transform:rotate(-19deg) translateY(-1.3em) scale(1.05);filter: blur(1px);background-image:linear-gradient(-90deg, rgba(255, 255, 255, 0.12) 20%, rgba(255, 255, 255, 0))}

.eta .btn-primary{background-color:#52C11F;color:#E6EAEF;border-color:#439e19;border-bottom-color:#347b14;box-shadow:0 1px 1px -1px rgba(255, 255, 255, 0.9) inset, 0 40px 20px -20px rgba(255, 255, 255, 0.15) inset, 0 -1px 1px -1px rgba(0, 0, 0, 0.7) inset, 0 -40px 20px -20px rgba(0, 0, 0, 0.06) inset, 0 9px 8px -4px rgba(0, 0, 0, 0.4), 0 2px 1px -1px rgba(0, 0, 0, 0.3), 7px 7px 8px -4px rgba(0, 0, 0, 0.1), -7px 7px 8px -4px rgba(0, 0, 0, 0.1), 0 -4px 12px 2px rgba(91, 215, 35, 0.2)}

.eta .btn-primary:hover{background-color:#59d322}

.eta .btn-primary:active{box-shadow:0 -1px 1px -1px rgba(255, 255, 255, 0.4) inset, 0 -40px 20px -20px rgba(255, 255, 255, 0.1) inset, 0 1px 1px -1px rgba(0, 0, 0, 0.7) inset, 0 40px 20px -20px rgba(0, 0, 0, 0.06) inset, 0 7px 8px -4px rgba(0, 0, 0, 0.4), 0 2px 1px -1px rgba(0, 0, 0, 0.2), 7px 7px 8px -4px rgba(0, 0, 0, 0.05), -7px 7px 8px -4px rgba(0, 0, 0, 0.05), 0 -4px 12px 2px rgba(91, 215, 35, 0.1);background-color:#4baf1c;color:#307212}

Theta
ボーダーがずれたボタン。ホバーで矩形とボーダーが入れ替わります。

.theta .btn{display:inline-block;margin:6px;font-size:inherit;line-height:1.42;padding:0.7em 1.4em;font-weight:normal;border-width:3px;border-style:solid;background:transparent;border-radius:0;cursor:pointer;font-family:"Booster Next FY", "Avenir Next", Avenir, sans-serif;user-select:none;vertical-align:bottom;position:relative;transform:translate(0.5em -0.4em);transition:transform 0.2s}
.theta .btn:before{content:'';display:block;position:absolute;top:0;left:0;height:100%;width:100%;z-index:-1;transform:translate(0.6em, -0.3em);transition:transform 0.2s, background-color 0.2s}

.theta .btn-primary{color:#52C11F;border-color:#52C11F}.theta .btn-primary:hover{transform:translate(0.2em, -0.1em)}.theta .btn-primary:hover:before{transform:translate(-0.4em, 0.4em)}
.theta .btn-primary:active{transform:translate(0, 0);transition-duration:0.1s}
.theta .btn-primary:active:before{transition-duration:0.1s;transform:translate(0, 0);background-color:rgba(31, 193, 142, 0.5)}
.theta .btn-primary:before{background-color:rgba(31, 193, 142, 0.4)}

.theta .btn{display:inline-block;margin:6px;font-size:inherit;line-height:1.42;padding:0.7em 1.4em;font-weight:normal;border-width:3px;border-style:solid;background:transparent;border-radius:0;cursor:pointer;font-family:"Booster Next FY", "Avenir Next", Avenir, sans-serif;user-select:none;vertical-align:bottom;position:relative;transform:translate(0.5em -0.4em);transition:transform 0.2s}

.theta .btn:before{content:'';display:block;position:absolute;top:0;left:0;height:100%;width:100%;z-index:-1;transform:translate(0.6em, -0.3em);transition:transform 0.2s, background-color 0.2s}

.theta .btn-primary{color:#52C11F;border-color:#52C11F}.theta .btn-primary:hover{transform:translate(0.2em, -0.1em)}.theta .btn-primary:hover:before{transform:translate(-0.4em, 0.4em)}

.theta .btn-primary:active{transform:translate(0, 0);transition-duration:0.1s}

.theta .btn-primary:active:before{transition-duration:0.1s;transform:translate(0, 0);background-color:rgba(31, 193, 142, 0.5)}

.theta .btn-primary:before{background-color:rgba(31, 193, 142, 0.4)}

Iota
角丸のかわいいボタン。ホバー時にアニメーションで反転します。

.iota .btn{display:inline-block;margin:6px;font-size:inherit;line-height:1.42;padding:0.6em 1.6em;font-weight:normal;border-width:2px;border-style:solid;background:transparent;border-radius:1.46em;cursor:pointer;font-family:"Booster Next FY", "Avenir Next", Avenir, sans-serif;user-select:none;vertical-align:bottom;position:relative;border-style:solid;overflow:hidden;transition:background-color 0.3s, color 0.3s}
.iota .btn:hover:after{transform:scaleX(1);opacity:1;transition:transform 0.3s, opacity 0.3s}
.iota .btn:after{content:'';display:block;position:absolute;top:0;left:0;height:100%;width:100%;z-index:-1;border-radius:1.46em;transform:scaleX(0.7);opacity:0;transition:transform 0.8s, opacity 0.3s}

.iota .btn-primary{color:#52C11F;border-color:#52C11F}
.iota .btn-primary:hover{color:#E6EAEF;background-color:#52C11F}
.iota .btn-primary:active{background-color:#4cb41d}
.iota .btn-primary:active:after{background-color:#4cb41d}
.iota .btn-primary:after{background-color:#52C11F}

.iota .btn{display:inline-block;margin:6px;font-size:inherit;line-height:1.42;padding:0.6em 1.6em;font-weight:normal;border-width:2px;border-style:solid;background:transparent;border-radius:1.46em;cursor:pointer;font-family:"Booster Next FY", "Avenir Next", Avenir, sans-serif;user-select:none;vertical-align:bottom;position:relative;border-style:solid;overflow:hidden;transition:background-color 0.3s, color 0.3s}

.iota .btn:hover:after{transform:scaleX(1);opacity:1;transition:transform 0.3s, opacity 0.3s}

.iota .btn:after{content:'';display:block;position:absolute;top:0;left:0;height:100%;width:100%;z-index:-1;border-radius:1.46em;transform:scaleX(0.7);opacity:0;transition:transform 0.8s, opacity 0.3s}

.iota .btn-primary{color:#52C11F;border-color:#52C11F}

.iota .btn-primary:hover{color:#E6EAEF;background-color:#52C11F}

.iota .btn-primary:active{background-color:#4cb41d}

.iota .btn-primary:active:after{background-color:#4cb41d}

.iota .btn-primary:after{background-color:#52C11F}

Kappa
クリックするとへこむボタン。

.kappa .btn{display:inline-block;margin:6px;font-size:inherit;line-height:1.42;padding:0.8em 1.4em;font-weight:normal;border-width:0;border-style:solid;background:transparent;border-radius:0.6em;cursor:pointer;font-family:"Booster Next FY", "Avenir Next", Avenir, sans-serif;user-select:none;vertical-align:bottom;text-shadow:0 1px 0 rgba(255, 255, 255, 0.1);transition:box-shadow 0.4s cubic-bezier(0.23, 1, 0.32, 1), transform 0.4s cubic-bezier(0.23, 1, 0.32, 1)}
.kappa .btn:active{transition-duration:0.2s;transform:scale(0.98)}

.kappa .btn-primary{background-color:#52C11F;color:#307212;box-shadow:0 4px 8px -1px rgba(0, 0, 0, 0.5), inset 0 -2px 5px -1px rgba(54, 127, 20, 0.6), 0 -3px 12px -1px rgba(122, 226, 74, 0.6), inset 0 3px 4px -1px rgba(122, 226, 74, 0.3), inset 0 0 4px 1px rgba(138, 230, 96, 0.8), inset 0 1.1em 1.4em 0 rgba(122, 226, 74, 0.5)}
.kappa .btn-primary:active{color:#25580e;box-shadow:0 3px 6px -1px rgba(0, 0, 0, 0.4), inset 0 -4px 16px 0 rgba(122, 226, 74, 0.9), 0 -3px 12px -1px rgba(122, 226, 74, 0.6), inset 0 4px 12px 0 rgba(54, 127, 20, 0.5), inset 0 0 4px 1px rgba(138, 230, 96, 0.8)}

.kappa .btn{display:inline-block;margin:6px;font-size:inherit;line-height:1.42;padding:0.8em 1.4em;font-weight:normal;border-width:0;border-style:solid;background:transparent;border-radius:0.6em;cursor:pointer;font-family:"Booster Next FY", "Avenir Next", Avenir, sans-serif;user-select:none;vertical-align:bottom;text-shadow:0 1px 0 rgba(255, 255, 255, 0.1);transition:box-shadow 0.4s cubic-bezier(0.23, 1, 0.32, 1), transform 0.4s cubic-bezier(0.23, 1, 0.32, 1)}

.kappa .btn:active{transition-duration:0.2s;transform:scale(0.98)}

.kappa .btn-primary{background-color:#52C11F;color:#307212;box-shadow:0 4px 8px -1px rgba(0, 0, 0, 0.5), inset 0 -2px 5px -1px rgba(54, 127, 20, 0.6), 0 -3px 12px -1px rgba(122, 226, 74, 0.6), inset 0 3px 4px -1px rgba(122, 226, 74, 0.3), inset 0 0 4px 1px rgba(138, 230, 96, 0.8), inset 0 1.1em 1.4em 0 rgba(122, 226, 74, 0.5)}

.kappa .btn-primary:active{color:#25580e;box-shadow:0 3px 6px -1px rgba(0, 0, 0, 0.4), inset 0 -4px 16px 0 rgba(122, 226, 74, 0.9), 0 -3px 12px -1px rgba(122, 226, 74, 0.6), inset 0 4px 12px 0 rgba(54, 127, 20, 0.5), inset 0 0 4px 1px rgba(138, 230, 96, 0.8)}

Lambda
クリックすると内側にシャドウが増えるボタン。

.lambda .btn{display:inline-block;margin:6px;font-size:inherit;line-height:1.42;padding:0.5em 1.8em;font-weight:normal;border-width:1px;border-style:solid;background:transparent;border-radius:1.21em;cursor:pointer;font-family:"Booster Next FY", "Avenir Next", Avenir, sans-serif;user-select:none;vertical-align:bottom;text-shadow:0 1px 0 rgba(255, 255, 255, 0.1);box-shadow:0 1px 4px -1px rgba(255, 255, 255, 0.4) inset, 0 6px 12px 1px rgba(0, 0, 0, 0.15), 0 6px 2px 1px rgba(0, 0, 0, 0.1), 6px 6px 12px 1px rgba(0, 0, 0, 0.05), -6px 6px 12px 1px rgba(0, 0, 0, 0.05), 4px 4px 2px 1px rgba(0, 0, 0, 0.07), -4px 4px 2px 1px rgba(0, 0, 0, 0.07), 6px 0 2px 1px rgba(255, 255, 255, 0.4), -6px 0 2px 1px rgba(255, 255, 255, 0.4), 6px 0 2px 1px rgba(0, 0, 0, 0.1), -6px 0 2px 1px rgba(0, 0, 0, 0.1), 4px -4px 2px 1px rgba(255, 255, 255, 0.8), -4px -4px 2px 1px rgba(255, 255, 255, 0.8), 0 -6px 12px 1px rgba(255, 255, 255, 0.9), 0 -6px 2px 1px rgba(255, 255, 255, 0.9), 0 0.6em 1em 0 rgba(0, 0, 0, 0.08) inset, 0 -0.6em 1em rgba(255, 255, 255, 0.08) inset;transition:box-shadow 0.2s cubic-bezier(0.23, 1, 0.32, 1), transform 0.35s cubic-bezier(0.23, 1, 0.32, 1)}
.lambda .btn:active{box-shadow:0 1px 4px -1px rgba(255, 255, 255, 0.1) inset, 0 6px 12px 1px rgba(0, 0, 0, 0.2), 0 6px 2px 1px rgba(0, 0, 0, 0.1), 6px 6px 12px 1px rgba(0, 0, 0, 0.05), -6px 6px 12px 1px rgba(0, 0, 0, 0.05), 4px 4px 2px 1px rgba(0, 0, 0, 0.07), -4px 4px 2px 1px rgba(0, 0, 0, 0.07), 6px 0 2px 1px rgba(255, 255, 255, 0.4), -6px 0 2px 1px rgba(255, 255, 255, 0.4), 6px 0 2px 1px rgba(0, 0, 0, 0.1), -6px 0 2px 1px rgba(0, 0, 0, 0.1), 4px -4px 2px 1px rgba(255, 255, 255, 0.8), -4px -4px 2px 1px rgba(255, 255, 255, 0.8), 0 -6px 12px 1px rgba(255, 255, 255, 0.9), 0 -6px 2px 1px rgba(255, 255, 255, 0.9), 0 0.6em 1em 0 rgba(0, 0, 0, 0.15) inset, 0 -0.6em 1em rgba(255, 255, 255, 0.15) inset}

.lambda .btn-primary{background-color:#52C11F;color:#E6EAEF;border-color:#439e19}
.lambda .btn-primary:hover{background-color:#54c520}
.lambda .btn-primary:active{background-color:#4eb81e}

.lambda .btn{display:inline-block;margin:6px;font-size:inherit;line-height:1.42;padding:0.5em 1.8em;font-weight:normal;border-width:1px;border-style:solid;background:transparent;border-radius:1.21em;cursor:pointer;font-family:"Booster Next FY", "Avenir Next", Avenir, sans-serif;user-select:none;vertical-align:bottom;text-shadow:0 1px 0 rgba(255, 255, 255, 0.1);box-shadow:0 1px 4px -1px rgba(255, 255, 255, 0.4) inset, 0 6px 12px 1px rgba(0, 0, 0, 0.15), 0 6px 2px 1px rgba(0, 0, 0, 0.1), 6px 6px 12px 1px rgba(0, 0, 0, 0.05), -6px 6px 12px 1px rgba(0, 0, 0, 0.05), 4px 4px 2px 1px rgba(0, 0, 0, 0.07), -4px 4px 2px 1px rgba(0, 0, 0, 0.07), 6px 0 2px 1px rgba(255, 255, 255, 0.4), -6px 0 2px 1px rgba(255, 255, 255, 0.4), 6px 0 2px 1px rgba(0, 0, 0, 0.1), -6px 0 2px 1px rgba(0, 0, 0, 0.1), 4px -4px 2px 1px rgba(255, 255, 255, 0.8), -4px -4px 2px 1px rgba(255, 255, 255, 0.8), 0 -6px 12px 1px rgba(255, 255, 255, 0.9), 0 -6px 2px 1px rgba(255, 255, 255, 0.9), 0 0.6em 1em 0 rgba(0, 0, 0, 0.08) inset, 0 -0.6em 1em rgba(255, 255, 255, 0.08) inset;transition:box-shadow 0.2s cubic-bezier(0.23, 1, 0.32, 1), transform 0.35s cubic-bezier(0.23, 1, 0.32, 1)}

.lambda .btn:active{box-shadow:0 1px 4px -1px rgba(255, 255, 255, 0.1) inset, 0 6px 12px 1px rgba(0, 0, 0, 0.2), 0 6px 2px 1px rgba(0, 0, 0, 0.1), 6px 6px 12px 1px rgba(0, 0, 0, 0.05), -6px 6px 12px 1px rgba(0, 0, 0, 0.05), 4px 4px 2px 1px rgba(0, 0, 0, 0.07), -4px 4px 2px 1px rgba(0, 0, 0, 0.07), 6px 0 2px 1px rgba(255, 255, 255, 0.4), -6px 0 2px 1px rgba(255, 255, 255, 0.4), 6px 0 2px 1px rgba(0, 0, 0, 0.1), -6px 0 2px 1px rgba(0, 0, 0, 0.1), 4px -4px 2px 1px rgba(255, 255, 255, 0.8), -4px -4px 2px 1px rgba(255, 255, 255, 0.8), 0 -6px 12px 1px rgba(255, 255, 255, 0.9), 0 -6px 2px 1px rgba(255, 255, 255, 0.9), 0 0.6em 1em 0 rgba(0, 0, 0, 0.15) inset, 0 -0.6em 1em rgba(255, 255, 255, 0.15) inset}

.lambda .btn-primary{background-color:#52C11F;color:#E6EAEF;border-color:#439e19}

.lambda .btn-primary:hover{background-color:#54c520}

.lambda .btn-primary:active{background-color:#4eb81e}

Mu
シンプルに角丸ソリッドのボタン。

.mu .btn{display:inline-block;margin:6px;font-size:inherit;line-height:1.42;padding:0.7em 1.4em;font-weight:normal;border-width:1px;border-style:solid;background:transparent;border-radius:1.41em;cursor:pointer;font-family:"Booster Next FY", "Avenir Next", Avenir, sans-serif;user-select:none;vertical-align:bottom}

.mu .btn-primary{color:#52C11F;border-color:#52C11F}

.mu .btn{display:inline-block;margin:6px;font-size:inherit;line-height:1.42;padding:0.7em 1.4em;font-weight:normal;border-width:1px;border-style:solid;background:transparent;border-radius:1.41em;cursor:pointer;font-family:"Booster Next FY", "Avenir Next", Avenir, sans-serif;user-select:none;vertical-align:bottom}

.mu .btn-primary{color:#52C11F;border-color:#52C11F}

Nu
あらゆる背景にマッチするゴーストボタン。ホバーで変形します。

.nu .btn{display:inline-block;margin:6px;font-size:inherit;line-height:1.42;padding:0.8em 2.5em;font-weight:normal;border-width:3px;border-style:solid;background:transparent;border-radius:0;cursor:pointer;font-family:"Booster Next FY", "Avenir Next", Avenir, sans-serif;user-select:none;vertical-align:bottom;transition:background-color 0.2s, color 0.2s, padding 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-radius 0.2s}

.nu .btn-primary{color:#52C11F;border-color:#52C11F}
.nu .btn-primary:hover{background-color:#52C11F;color:#E6EAEF;padding-left:3.5em;padding-right:3.5em;border-radius:0.4em}
.nu .btn-primary:active{background-color:#4cb41d;border-color:#4cb41d}

.nu .btn{display:inline-block;margin:6px;font-size:inherit;line-height:1.42;padding:0.8em 2.5em;font-weight:normal;border-width:3px;border-style:solid;background:transparent;border-radius:0;cursor:pointer;font-family:"Booster Next FY", "Avenir Next", Avenir, sans-serif;user-select:none;vertical-align:bottom;transition:background-color 0.2s, color 0.2s, padding 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-radius 0.2s}

.nu .btn-primary{color:#52C11F;border-color:#52C11F}

.nu .btn-primary:hover{background-color:#52C11F;color:#E6EAEF;padding-left:3.5em;padding-right:3.5em;border-radius:0.4em}

.nu .btn-primary:active{background-color:#4cb41d;border-color:#4cb41d}

Xi
クリックするエフェクトにこだわったボタン。

.xi .btn{display:inline-block;margin:6px;font-size:inherit;line-height:1.42;padding:0.6em 1.8em;font-weight:normal;border-width:0;border-style:solid;background:transparent;border-radius:1.31em;cursor:pointer;font-family:"Booster Next FY", "Avenir Next", Avenir, sans-serif;user-select:none;vertical-align:bottom;transition:box-shadow 0.2s, background-color 0.2s, color 0.2s;position:relative;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.15);box-shadow:0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0 -1.31em 1.31em -1.31em rgba(0, 0, 0, 0.3) inset, 0 0 1px 0 rgba(0, 0, 0, 0.1)}
.xi .btn:active{transition-duration:0.05s;text-shadow:0 1px 0 rgba(255, 255, 255, 0.15);box-shadow:0 -1px 1px 0 transparent, 0 -2px 4px 0 transparent, 0 -1px 0 0 transparent inset, 0 1.31em 1.31em -1.31em rgba(0, 0, 0, 0.3) inset, 0 0 4px 0 rgba(0, 0, 0, 0.1);transform:scale(0.99)}
.xi .btn:active:before{transform:translateY(1.01)}
.xi .btn:before{content:'';position:absolute;top:-7px;left:-7px;right:-7px;bottom:-7px;border-radius:1.71em;background-image:linear-gradient(0deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.1));z-index:-1}

.xi .btn-primary{background-color:#52C11F;color:#bbf0a2}
.xi .btn-primary:hover{background-color:#58ce21}
.xi .btn-primary:active{background-color:#4cb41d;color:#2d6911}

.xi .btn{display:inline-block;margin:6px;font-size:inherit;line-height:1.42;padding:0.6em 1.8em;font-weight:normal;border-width:0;border-style:solid;background:transparent;border-radius:1.31em;cursor:pointer;font-family:"Booster Next FY", "Avenir Next", Avenir, sans-serif;user-select:none;vertical-align:bottom;transition:box-shadow 0.2s, background-color 0.2s, color 0.2s;position:relative;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.15);box-shadow:0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0 -1.31em 1.31em -1.31em rgba(0, 0, 0, 0.3) inset, 0 0 1px 0 rgba(0, 0, 0, 0.1)}

.xi .btn:active{transition-duration:0.05s;text-shadow:0 1px 0 rgba(255, 255, 255, 0.15);box-shadow:0 -1px 1px 0 transparent, 0 -2px 4px 0 transparent, 0 -1px 0 0 transparent inset, 0 1.31em 1.31em -1.31em rgba(0, 0, 0, 0.3) inset, 0 0 4px 0 rgba(0, 0, 0, 0.1);transform:scale(0.99)}

.xi .btn:active:before{transform:translateY(1.01)}

.xi .btn:before{content:'';position:absolute;top:-7px;left:-7px;right:-7px;bottom:-7px;border-radius:1.71em;background-image:linear-gradient(0deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.1));z-index:-1}

.xi .btn-primary{background-color:#52C11F;color:#bbf0a2}

.xi .btn-primary:hover{background-color:#58ce21}

.xi .btn-primary:active{background-color:#4cb41d;color:#2d6911}

Omicron
オーブのように輝いたデザインのボタン。

.omicron .btn{display:inline-block;margin:6px;font-size:inherit;line-height:1.42;padding:0.8em 2.2em;font-weight:normal;border-width:2px;border-style:solid;background:transparent;border-radius:1.66em;cursor:pointer;font-family:"Booster Next FY", "Avenir Next", Avenir, sans-serif;user-select:none;vertical-align:bottom;transition:box-shadow 0.15s, background-color 0.15s;box-shadow:0 0 1em 0 rgba(255, 255, 255, 0.1) inset, 0 2.2em 0 -1em rgba(255, 255, 255, 0.2) inset, 0 1.5em 1em -1em rgba(255, 255, 255, 0.3) inset, 0 0 4px 1px rgba(0, 0, 0, 0.2) inset}
.omicron .btn:active{box-shadow:0 0 1em 0 rgba(0, 0, 0, 0.1) inset, 0 2.2em 1em -1em rgba(255, 255, 255, 0.05) inset, 0 1.5em 1em -1em rgba(255, 255, 255, 0) inset, 0 0 4px 1px rgba(0, 0, 0, 0.2) inset}

.omicron .btn-primary{background-image:radial-gradient(ellipse at bottom center, #4ffa00, #52C11F);background-color:#52C11F;color:rgba(35, 83, 13, 0.8);border-color:#3f9518}
.omicron .btn-primary:hover{background-image:radial-gradient(ellipse at bottom center, #65ff1e, #52C11F)}
.omicron .btn-primary:active{background-image:radial-gradient(ellipse at bottom center, #3ec700, #52C11F)}

.omicron .btn{display:inline-block;margin:6px;font-size:inherit;line-height:1.42;padding:0.8em 2.2em;font-weight:normal;border-width:2px;border-style:solid;background:transparent;border-radius:1.66em;cursor:pointer;font-family:"Booster Next FY", "Avenir Next", Avenir, sans-serif;user-select:none;vertical-align:bottom;transition:box-shadow 0.15s, background-color 0.15s;box-shadow:0 0 1em 0 rgba(255, 255, 255, 0.1) inset, 0 2.2em 0 -1em rgba(255, 255, 255, 0.2) inset, 0 1.5em 1em -1em rgba(255, 255, 255, 0.3) inset, 0 0 4px 1px rgba(0, 0, 0, 0.2) inset}

.omicron .btn:active{box-shadow:0 0 1em 0 rgba(0, 0, 0, 0.1) inset, 0 2.2em 1em -1em rgba(255, 255, 255, 0.05) inset, 0 1.5em 1em -1em rgba(255, 255, 255, 0) inset, 0 0 4px 1px rgba(0, 0, 0, 0.2) inset}

.omicron .btn-primary{background-image:radial-gradient(ellipse at bottom center, #4ffa00, #52C11F);background-color:#52C11F;color:rgba(35, 83, 13, 0.8);border-color:#3f9518}

.omicron .btn-primary:hover{background-image:radial-gradient(ellipse at bottom center, #65ff1e, #52C11F)}

.omicron .btn-primary:active{background-image:radial-gradient(ellipse at bottom center, #3ec700, #52C11F)}

Pi
マシュマロ風のかわいいボタン。

.pi .btn{display:inline-block;margin:6px;font-size:inherit;line-height:1.42;padding:0.6em 1.6em;font-weight:normal;border-width:0;border-style:solid;background:transparent;border-radius:0.5em;cursor:pointer;font-family:"Booster Next FY", "Avenir Next", Avenir, sans-serif;user-select:none;vertical-align:bottom;transition:box-shadow 0.2s, transform 0.2s;border-radius:12% / 50%;box-shadow:0 0 0 1px rgba(0, 0, 0, 0.1)}
.pi .btn:hover{transform:scale(1.02);box-shadow:0 1px 10px 1px rgba(0, 0, 0, 0.2)}
.pi .btn:active{transform:scale(0.99);box-shadow:0 2px 6px 1px rgba(0, 0, 0, 0.15) inset;transition-duration:0.05s}

.pi .btn-primary{color:#52C11F}

.pi .btn{display:inline-block;margin:6px;font-size:inherit;line-height:1.42;padding:0.6em 1.6em;font-weight:normal;border-width:0;border-style:solid;background:transparent;border-radius:0.5em;cursor:pointer;font-family:"Booster Next FY", "Avenir Next", Avenir, sans-serif;user-select:none;vertical-align:bottom;transition:box-shadow 0.2s, transform 0.2s;border-radius:12% / 50%;box-shadow:0 0 0 1px rgba(0, 0, 0, 0.1)}

.pi .btn:hover{transform:scale(1.02);box-shadow:0 1px 10px 1px rgba(0, 0, 0, 0.2)}

.pi .btn:active{transform:scale(0.99);box-shadow:0 2px 6px 1px rgba(0, 0, 0, 0.15) inset;transition-duration:0.05s}

.pi .btn-primary{color:#52C11F}

Rho
内側にネストされたボタン。

.rho .btn{display:inline-block;margin:6px;font-size:inherit;line-height:1.42;padding:0.6em 2.2em;font-weight:normal;border-width:0;border-style:solid;background:transparent;border-radius:1.46em;cursor:pointer;font-family:"Booster Next FY", "Avenir Next", Avenir, sans-serif;user-select:none;vertical-align:bottom;transition:box-shadow 0.2s, background-color 0.2s;position:relative;background-color:#CED0DB;background-image:linear-gradient(0deg, #CED0DB, #E6EAEF);color:#3F4351;box-shadow:0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.3), 0 2px 7px rgba(0, 0, 0, 0.4)}
.rho .btn:before{content:'';display:block;position:absolute;padding:0.35em;text-shadow:none;top:-0.35em;left:-0.35em;right:-0.35em;bottom:-0.35em;border-radius:1.81em;box-shadow:0 1px 1px 0 rgba(0, 0, 0, 0.2) inset, 0 3px 3px -2px rgba(0, 0, 0, 0.2) inset;z-index:-1}

.rho .btn-primary:active{background-color:#bfc2d0;background-image:linear-gradient(0deg, #CED0DB, #d6dde5);box-shadow:0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.1), 0 2px 7px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1) inset}
.rho .btn-primary:before{background-color:#52C11F}

.rho .btn{display:inline-block;margin:6px;font-size:inherit;line-height:1.42;padding:0.6em 2.2em;font-weight:normal;border-width:0;border-style:solid;background:transparent;border-radius:1.46em;cursor:pointer;font-family:"Booster Next FY", "Avenir Next", Avenir, sans-serif;user-select:none;vertical-align:bottom;transition:box-shadow 0.2s, background-color 0.2s;position:relative;background-color:#CED0DB;background-image:linear-gradient(0deg, #CED0DB, #E6EAEF);color:#3F4351;box-shadow:0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.3), 0 2px 7px rgba(0, 0, 0, 0.4)}

.rho .btn:before{content:'';display:block;position:absolute;padding:0.35em;text-shadow:none;top:-0.35em;left:-0.35em;right:-0.35em;bottom:-0.35em;border-radius:1.81em;box-shadow:0 1px 1px 0 rgba(0, 0, 0, 0.2) inset, 0 3px 3px -2px rgba(0, 0, 0, 0.2) inset;z-index:-1}

.rho .btn-primary:active{background-color:#bfc2d0;background-image:linear-gradient(0deg, #CED0DB, #d6dde5);box-shadow:0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.1), 0 2px 7px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1) inset}

.rho .btn-primary:before{background-color:#52C11F}

Sigma
シンプルなソリッドのボタン。

.sigma .btn{display:inline-block;margin:6px;font-size:inherit;line-height:1.42;padding:0.45em 2.5em;font-weight:normal;border-width:1px;border-style:solid;background:transparent;border-radius:0.2em;cursor:pointer;font-family:"Booster Next FY", "Avenir Next", Avenir, sans-serif;user-select:none;vertical-align:bottom;transition:box-shadow 0.3s, background-color 0.3s;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.2)}
.sigma .btn:active{transition-duration:0.1s;text-shadow:0 1px 0 rgba(0, 0, 0, 0.1), 0 -1px 0 rgba(255, 255, 255, 0.1)}

.sigma .btn-primary{background-color:#52C11F;color:#307212;border-color:#3c8c17;box-shadow:0 -4px 12px -1px rgba(82, 193, 31, 0.3), 0 1px 1px 0 rgba(0, 0, 0, 0.35), 0 2px 6px 1px rgba(0, 0, 0, 0.3), 0 10px 6px -2px rgba(0, 0, 0, 0.25), 0 1px 0 0 rgba(255, 255, 255, 0.2) inset, 0 -2.5em 2em -1.5em rgba(0, 0, 0, 0.12) inset}
.sigma .btn-primary:hover{background-color:#56ca20}
.sigma .btn-primary:active{background-color:#49ab1b;box-shadow:0 -4px 12px -1px rgba(82, 193, 31, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.3), 0 2px 6px 1px rgba(0, 0, 0, 0.2), 0 8px 6px -2px rgba(0, 0, 0, 0.2), 0 -1px 0 0 rgba(255, 255, 255, 0.1) inset, 0 2.5em 2em -1.5em rgba(0, 0, 0, 0.12) inset}

.sigma .btn{display:inline-block;margin:6px;font-size:inherit;line-height:1.42;padding:0.45em 2.5em;font-weight:normal;border-width:1px;border-style:solid;background:transparent;border-radius:0.2em;cursor:pointer;font-family:"Booster Next FY", "Avenir Next", Avenir, sans-serif;user-select:none;vertical-align:bottom;transition:box-shadow 0.3s, background-color 0.3s;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.2)}

.sigma .btn:active{transition-duration:0.1s;text-shadow:0 1px 0 rgba(0, 0, 0, 0.1), 0 -1px 0 rgba(255, 255, 255, 0.1)}

.sigma .btn-primary{background-color:#52C11F;color:#307212;border-color:#3c8c17;box-shadow:0 -4px 12px -1px rgba(82, 193, 31, 0.3), 0 1px 1px 0 rgba(0, 0, 0, 0.35), 0 2px 6px 1px rgba(0, 0, 0, 0.3), 0 10px 6px -2px rgba(0, 0, 0, 0.25), 0 1px 0 0 rgba(255, 255, 255, 0.2) inset, 0 -2.5em 2em -1.5em rgba(0, 0, 0, 0.12) inset}

.sigma .btn-primary:hover{background-color:#56ca20}

.sigma .btn-primary:active{background-color:#49ab1b;box-shadow:0 -4px 12px -1px rgba(82, 193, 31, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.3), 0 2px 6px 1px rgba(0, 0, 0, 0.2), 0 8px 6px -2px rgba(0, 0, 0, 0.2), 0 -1px 0 0 rgba(255, 255, 255, 0.1) inset, 0 2.5em 2em -1.5em rgba(0, 0, 0, 0.12) inset}

Tau
フラットデザインでよく見かけるボタン。

.tau .btn{display:inline-block;margin:6px;font-size:inherit;line-height:1.42;padding:1.2em 2.4em;font-weight:normal;border-width:0;border-style:solid;background:transparent;border-radius:0;cursor:pointer;font-family:"Booster Next FY", "Avenir Next", Avenir, sans-serif;user-select:none;vertical-align:bottom;transition:background-color 0.3s}
.tau .btn:active{transition-duration:0.1s}

.tau .btn-primary{background-color:#52C11F;color:#E6EAEF}
.tau .btn-primary:hover{background-color:#59d322}
.tau .btn-primary:active{background-color:#4baf1c}

.tau .btn{display:inline-block;margin:6px;font-size:inherit;line-height:1.42;padding:1.2em 2.4em;font-weight:normal;border-width:0;border-style:solid;background:transparent;border-radius:0;cursor:pointer;font-family:"Booster Next FY", "Avenir Next", Avenir, sans-serif;user-select:none;vertical-align:bottom;transition:background-color 0.3s}

.tau .btn:active{transition-duration:0.1s}

.tau .btn-primary{background-color:#52C11F;color:#E6EAEF}

.tau .btn-primary:hover{background-color:#59d322}

.tau .btn-primary:active{background-color:#4baf1c}

Upsilon
アフォーダンスを少し加えたフラットなボタン。

.upsilon .btn{display:inline-block;margin:6px;font-size:inherit;line-height:1.42;padding:1.2em 1.6em;font-weight:normal;border-width:0;border-style:solid;background:transparent;border-radius:6px;cursor:pointer;font-family:"Booster Next FY", "Avenir Next", Avenir, sans-serif;user-select:none;vertical-align:bottom;transition:background-color 0.2s, box-shadow 0.2s, transform 0.2s;box-shadow:0 -2px 0 0 rgba(0, 0, 0, 0.3) inset}
.upsilon .btn:active{transition-duration:0.1s;box-shadow:0 0 0 0 rgba(0, 0, 0, 0.3) inset;transform:translateY(1px)}

.upsilon .btn-primary{background-color:#52C11F;color:#E6EAEF}
.upsilon .btn-primary:hover{background-color:#59d322}
.upsilon .btn-primary:active{background-color:#4baf1c}

.upsilon .btn{display:inline-block;margin:6px;font-size:inherit;line-height:1.42;padding:1.2em 1.6em;font-weight:normal;border-width:0;border-style:solid;background:transparent;border-radius:6px;cursor:pointer;font-family:"Booster Next FY", "Avenir Next", Avenir, sans-serif;user-select:none;vertical-align:bottom;transition:background-color 0.2s, box-shadow 0.2s, transform 0.2s;box-shadow:0 -2px 0 0 rgba(0, 0, 0, 0.3) inset}

.upsilon .btn:active{transition-duration:0.1s;box-shadow:0 0 0 0 rgba(0, 0, 0, 0.3) inset;transform:translateY(1px)}

.upsilon .btn-primary{background-color:#52C11F;color:#E6EAEF}

.upsilon .btn-primary:hover{background-color:#59d322}

.upsilon .btn-primary:active{background-color:#4baf1c}

Phi
ナッツのボタン。

.phi .btn{display:inline-block;margin:6px;font-size:inherit;line-height:1.42;padding:1.2em 1.6em;font-weight:normal;border-width:3px;border-style:solid;background:transparent;border-radius:0.4em;cursor:pointer;font-family:"Booster Next FY", "Avenir Next", Avenir, sans-serif;user-select:none;vertical-align:bottom;transition:transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s, background-color 0.3s;border-radius:0.5em 0.6em / 0.6em 1em 3em 1em}
.phi .btn:hover{transform:translate(-2px, -2px)}
.phi .btn:active{transition-duration:0.1s;transform:translate(4px, 4px)}

.phi .btn-primary{color:#52C11F;border-color:#52C11F;box-shadow:6px 0 0 0 #52C11F, 6px 6px 0 0 #52C11F, 0 6px 0 0 #52C11F}
.phi .btn-primary:hover{box-shadow:8px 0 0 0 #52C11F, 8px 8px 0 0 #52C11F, 0 8px 0 0 #52C11F}
.phi .btn-primary:active{background-color:#52C11F;color:#E6EAEF;box-shadow:2px 0 0 0 #52C11F, 2px 2px 0 0 #52C11F, 0 2px 0 0 #52C11F}

.phi .btn{display:inline-block;margin:6px;font-size:inherit;line-height:1.42;padding:1.2em 1.6em;font-weight:normal;border-width:3px;border-style:solid;background:transparent;border-radius:0.4em;cursor:pointer;font-family:"Booster Next FY", "Avenir Next", Avenir, sans-serif;user-select:none;vertical-align:bottom;transition:transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s, background-color 0.3s;border-radius:0.5em 0.6em / 0.6em 1em 3em 1em}

.phi .btn:hover{transform:translate(-2px, -2px)}

.phi .btn:active{transition-duration:0.1s;transform:translate(4px, 4px)}

.phi .btn-primary{color:#52C11F;border-color:#52C11F;box-shadow:6px 0 0 0 #52C11F, 6px 6px 0 0 #52C11F, 0 6px 0 0 #52C11F}

.phi .btn-primary:hover{box-shadow:8px 0 0 0 #52C11F, 8px 8px 0 0 #52C11F, 0 8px 0 0 #52C11F}

.phi .btn-primary:active{background-color:#52C11F;color:#E6EAEF;box-shadow:2px 0 0 0 #52C11F, 2px 2px 0 0 #52C11F, 0 2px 0 0 #52C11F}

Chi
ホバー時にカーテンが下がるエフェクト。

.chi .btn{display:inline-block;margin:6px;font-size:inherit;line-height:1.42;padding:0.6em 1.8em;font-weight:normal;border-width:3px;border-style:solid;background:transparent;border-radius:0;cursor:pointer;font-family:"Booster Next FY", "Avenir Next", Avenir, sans-serif;user-select:none;vertical-align:bottom;position:relative;transition:color 0.4s, transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);box-sizing:border-box}
.chi .btn:hover:before{transform:scaleY(1)}
.chi .btn:hover:after{transform:translate(6px, 6px)}
.chi .btn:active{transition-duration:0.05s;transform:translate(6px, 6px)}
.chi .btn:active:after{transition-duration:0.05s;transform:translate(0, 0)}
.chi .btn:after,.chi .btn:before{content:'';position:absolute;display:block;top:0;left:0;height:100%;width:100%;z-index:-1}
.chi .btn:before{transform-origin:top center;transform:scaleY(0);transition:transform cubic-bezier(1, 0, 0, 1) 0.4s}
.chi .btn:after{top:-3px;left:-3px;border-width:3px;border-style:solid;transition:transform cubic-bezier(0.645, 0.045, 0.355, 1) 0.4s}

.chi .btn-primary{color:#52C11F;border-color:#52C11F}
.chi .btn-primary:hover{color:#E6EAEF}
.chi .btn-primary:before{background-color:#52C11F}
.chi .btn-primary:after{border-color:#52C11F}

.chi .btn{display:inline-block;margin:6px;font-size:inherit;line-height:1.42;padding:0.6em 1.8em;font-weight:normal;border-width:3px;border-style:solid;background:transparent;border-radius:0;cursor:pointer;font-family:"Booster Next FY", "Avenir Next", Avenir, sans-serif;user-select:none;vertical-align:bottom;position:relative;transition:color 0.4s, transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);box-sizing:border-box}

.chi .btn:hover:before{transform:scaleY(1)}

.chi .btn:hover:after{transform:translate(6px, 6px)}

.chi .btn:active{transition-duration:0.05s;transform:translate(6px, 6px)}

.chi .btn:active:after{transition-duration:0.05s;transform:translate(0, 0)}

.chi .btn:after,.chi .btn:before{content:'';position:absolute;display:block;top:0;left:0;height:100%;width:100%;z-index:-1}

.chi .btn:before{transform-origin:top center;transform:scaleY(0);transition:transform cubic-bezier(1, 0, 0, 1) 0.4s}

.chi .btn:after{top:-3px;left:-3px;border-width:3px;border-style:solid;transition:transform cubic-bezier(0.645, 0.045, 0.355, 1) 0.4s}

.chi .btn-primary{color:#52C11F;border-color:#52C11F}

.chi .btn-primary:hover{color:#E6EAEF}

.chi .btn-primary:before{background-color:#52C11F}

.chi .btn-primary:after{border-color:#52C11F}

Psi
ダークUI用のボタン。

.psi .btn{display:inline-block;margin:6px;font-size:inherit;line-height:1.42;padding:0.5em 1.5em;font-weight:normal;border-width:2px;border-style:solid;background:transparent;border-radius:2px;cursor:pointer;font-family:"Booster Next FY", "Avenir Next", Avenir, sans-serif;user-select:none;vertical-align:bottom;position:relative;background-color:#252730;transition:color 0.25s, box-shadow 0.25s;overflow:hidden;box-shadow:0 1px 1px -1px rgba(255, 255, 255, 0.8) inset, 0 40px 20px -20px rgba(255, 255, 255, 0.08) inset, 0 -1px 1px -1px rgba(0, 0, 0, 0.7) inset, 0 -40px 20px -20px rgba(0, 0, 0, 0.06) inset, 0 11px 8px -3px rgba(0, 0, 0, 0.4), 0 4px 2px -2px rgba(0, 0, 0, 0.3), 0 1px 6px 1px rgba(0, 0, 0, 0.5)}
.psi .btn:hover:after{opacity:1}
.psi .btn:active{transition-duration:0.1s;box-shadow:0 -1px 1px -1px rgba(255, 255, 255, 0.3) inset, 0 -40px 20px -20px rgba(255, 255, 255, 0.05) inset, 0 -1px 1px -1px rgba(0, 0, 0, 0.7) inset, 0 40px 20px -20px rgba(0, 0, 0, 0.05) inset, 0 11px 8px -3px rgba(0, 0, 0, 0.25), 0 4px 2px -2px rgba(0, 0, 0, 0.2), 0 1px 6px 1px rgba(0, 0, 0, 0.4)}
.psi .btn:active:after{transition-duration:0.1s;opacity:0.2}
.psi .btn:after{content:'';display:block;position:absolute;top:0;left:0;height:100%;width:100%;transform:rotate(-19deg) translateY(-1.3em) scale(1.08);filter: blur(1px);-webkit-filter: blur(1px);background-image:linear-gradient(-90deg, rgba(255, 255, 255, 0.18) 10%, rgba(255, 255, 255, 0) 45%);opacity:0.6;transition:opacity 0.25s}

.psi .btn-primary{color:#52C11F;border-color:#0f1013;text-shadow:0 0 16px rgba(82, 193, 31, 0.5), 0 -1px 0 rgba(0, 0, 0, 0.9)}
.psi .btn-primary:hover{text-shadow:0 0 16px rgba(82, 193, 31, 0.75), 0 -1px 0 rgba(0, 0, 0, 0.9)}
.psi .btn-primary:active{text-shadow:0 0 16px rgba(82, 193, 31, 0.3), 0 1px 0 rgba(255, 255, 255, 0.1);color:#3f9518}

.psi .btn{display:inline-block;margin:6px;font-size:inherit;line-height:1.42;padding:0.5em 1.5em;font-weight:normal;border-width:2px;border-style:solid;background:transparent;border-radius:2px;cursor:pointer;font-family:"Booster Next FY", "Avenir Next", Avenir, sans-serif;user-select:none;vertical-align:bottom;position:relative;background-color:#252730;transition:color 0.25s, box-shadow 0.25s;overflow:hidden;box-shadow:0 1px 1px -1px rgba(255, 255, 255, 0.8) inset, 0 40px 20px -20px rgba(255, 255, 255, 0.08) inset, 0 -1px 1px -1px rgba(0, 0, 0, 0.7) inset, 0 -40px 20px -20px rgba(0, 0, 0, 0.06) inset, 0 11px 8px -3px rgba(0, 0, 0, 0.4), 0 4px 2px -2px rgba(0, 0, 0, 0.3), 0 1px 6px 1px rgba(0, 0, 0, 0.5)}

.psi .btn:hover:after{opacity:1}

.psi .btn:active{transition-duration:0.1s;box-shadow:0 -1px 1px -1px rgba(255, 255, 255, 0.3) inset, 0 -40px 20px -20px rgba(255, 255, 255, 0.05) inset, 0 -1px 1px -1px rgba(0, 0, 0, 0.7) inset, 0 40px 20px -20px rgba(0, 0, 0, 0.05) inset, 0 11px 8px -3px rgba(0, 0, 0, 0.25), 0 4px 2px -2px rgba(0, 0, 0, 0.2), 0 1px 6px 1px rgba(0, 0, 0, 0.4)}

.psi .btn:active:after{transition-duration:0.1s;opacity:0.2}

.psi .btn:after{content:'';display:block;position:absolute;top:0;left:0;height:100%;width:100%;transform:rotate(-19deg) translateY(-1.3em) scale(1.08);filter: blur(1px);-webkit-filter: blur(1px);background-image:linear-gradient(-90deg, rgba(255, 255, 255, 0.18) 10%, rgba(255, 255, 255, 0) 45%);opacity:0.6;transition:opacity 0.25s}

.psi .btn-primary{color:#52C11F;border-color:#0f1013;text-shadow:0 0 16px rgba(82, 193, 31, 0.5), 0 -1px 0 rgba(0, 0, 0, 0.9)}

.psi .btn-primary:hover{text-shadow:0 0 16px rgba(82, 193, 31, 0.75), 0 -1px 0 rgba(0, 0, 0, 0.9)}

.psi .btn-primary:active{text-shadow:0 0 16px rgba(82, 193, 31, 0.3), 0 1px 0 rgba(255, 255, 255, 0.1);color:#3f9518}

Omega
フラットなボタンにラインのアニメーションを加えたボタン。

.omega .btn{display:inline-block;margin:6px;font-size:inherit;line-height:1.42;padding:0.8em 1.6em;font-weight:normal;border-width:2px;border-style:solid;background:transparent;border-radius:0;cursor:pointer;font-family:"Booster Next FY", "Avenir Next", Avenir, sans-serif;user-select:none;vertical-align:bottom;transition:transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);color:#3F4351;border-color:#3F4351;position:relative}
.omega .btn:hover:before{transform:scale(0.85, 1.1) translate(8%, -15%)}
.omega .btn:active:before{transition-duration:0.15s;transition-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1.275);transform:scale(1.04, 1.1) translate(6%, 3%)}
.omega .btn:before{content:'';display:block;position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0.4, 0.15) translate(12%, -20%);transform-origin:-5% -5%;transition:transform 0.3s, background-color 0.3s;z-index:-1}

.omega .btn-primary:hover{color:#E6EAEF}

.omega .btn{display:inline-block;margin:6px;font-size:inherit;line-height:1.42;padding:0.8em 1.6em;font-weight:normal;border-width:2px;border-style:solid;background:transparent;border-radius:0;cursor:pointer;font-family:"Booster Next FY", "Avenir Next", Avenir, sans-serif;user-select:none;vertical-align:bottom;transition:transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);color:#3F4351;border-color:#3F4351;position:relative}

.omega .btn:hover:before{transform:scale(0.85, 1.1) translate(8%, -15%)}

.omega .btn:active:before{transition-duration:0.15s;transition-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1.275);transform:scale(1.04, 1.1) translate(6%, 3%)}

.omega .btn:before{content:'';display:block;position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0.4, 0.15) translate(12%, -20%);transform-origin:-5% -5%;transition:transform 0.3s, background-color 0.3s;z-index:-1}

.omega .btn-primary:hover{color:#E6EAEF}