泡立つような、カラフルなサイトのボタンのトリオ

私たちはシフトバックグラウンドグラデーションを使用しますtransform: translate アニメーション、およびテキストのようなスタイルのボタン.
私はWebプロジェクトのデザイン原則を読んでいます.私の最後の大きいプロジェクトのために.Gachasphere , 私は階層的なボタンを実装したかった.それで、私はサイトの向こう側に適用するために3つのボタンスタイルを作りました:プライマリ、セカンダリと第三級.
私は、プライマリボタンをアクションの呼び出しと削除のような“危険な”アクションを使用することを望んだ.理想的には、それはユーザーの目が描かれる最初のもののうちの1つであるでしょう.
二次ボタンの私の目標は、それが簡単に三次ボタンよりも見つけることが、主要なボタンとして顕著ではないことでした.これは、ページ内のナビゲーションや拡張コンポーネントのようなものに使用されます.
三次ボタンについては、ユーザーはそれを見つけることができるとそれがクリック可能であるが、それはフォーカスをプルすべきではない教えてください.リンクの代わりにボタンを必要とするとき、それはオプションの関連と我々のNavバーで使われます.
必要なのはHTML<button> タグ.

プライマリー

私は、私が私の注意グラブボタンを丸くして、少し太っていることを知っていますbox-shadow: , それで、私たちはそれらの宣言から始めます.また、マージンを与え、テキストを中央に並び、その境界線を削除します.この場合、テキストカラーは、サイト全体のプライマリレベルのテキストに使用される色です.

.primary-button {
  margin: 20px;
  padding: 15px 35px;
  text-align: center;
  box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
  border-radius: 30px;
  border: none;
}

次に勾配.我々はバックグラウンドをオーバーサイジングしているので、ホバーに移ってクリックできます.このプロジェクトのために、私は色を引くために2つのロゴを持ちました、そして、幸運に、彼らは対照しました.だから我々の主要なボタンは、青色の背景に赤、黄色、オレンジ色のグラデーションされ、それは本当にポップになります!以下を加える.primary-button ルールセット.

background-size: 200% auto;
color: #083136;
background-image: linear-gradient(
  to right,
    #ffbc5b 0%,
    #ff5645 50%,
    #f7213d 50%,
    #dd07b7 100%
  );

これは以下のようになります.

その後、ホバー効果.これをあなたの.primary-button ルールセット:

transition: 0.5s;

つの新しいルールセットを追加します.ホバー/フォーカスの色を変更する

.primary-button:hover,
.primary-button:focus {
  background-position: right center;
  outline: none;
}

これは以下のようになります.

2番目の宣言では、色をクリックします.

.primary-button:active,
.primary-button:active:after {
  outline: none;
  background-position: left center;
}

以下のようになります.

両方ともoutline: none; によって提供されるデフォルトのブルーフォーカスのアウトラインを防ぐ<button> アクセシビリティ目的のためのタグ.

二次

私は私の二次ボタンを私の主要なボタンに双子ではない兄弟にしたかった.それで、それは少しより少ない詰め物を持ちます、しかし、同じborder-radius and box-shadow . 私が選んだグラデーション色は、私が働いている背景色(または同じ)に近いです.この場合、テキスト・カラーはサイトの向こう側の二次レベルのテキストのために使用される色です.ルールセットは次のようになります.

.secondary-button {
  border-radius: 30px;
  padding: 10px 30px;
  margin: 20px;
  border: none;
  color: #07373b;
  background-image: linear-gradient(
    to right,
    #e8fffb 0%,
    #85fff1 40%,
    #47d4e5 100%
  );
}

これは以下のようになります.

最後に、我々は少し別のクリックアニメーションを追加しますtransform: translate 新しいルールを設定します.今、ボタンをクリックすると、x軸とy軸の3 pxをクリックするときにクリックされます-ユーザーのためのいくつかの素敵なビジュアルフィードバック.

.secondary-button:active {
  transform: translateY(3px) translateX(3px);
}

では、

テキストの色は、背景との十分なコントラストを持っているので、カーソルはおそらく十分です…しかし、ボタンの色が背景色を含んでいるので、私はフォーカスのアウトラインを残しました.

第三紀

最後に、忘れられないボタン.スタイリングは、テキストのようになります.カーソルの変更は、それがクリック可能であることを示しています(そして、それはまだキーボードユーザによってフォーカブルになるでしょう、そして、スクリーンリーダーのために意味がある)は<button> タグ)この場合、テキストカラーは私がサイトの向こう側の三次レベルのテキストのために使用していたものです.

.tertiary-button {
  border: none;
  color: #0d5059;
  background-color: #adfff5;
  padding: 20px;
}

まとめてみてください.

明確な階層!かなり明らかにログインボタンはアクションへの呼び出しです.あなたの目がログインページの代わりに登録ページにあなたを案内するために動く次のボタン.“忘れられたパスワード”と“ゲストとしてログイン”オプションは簡単に見つかりますが、フォーカスをプルしないでください.

結論

うまくいけば、明確な階層でボタンを設計するための私の思考プロセスに少し洞察力を得た.私は本当にシフト背景グラデーション効果が大好きです.もっと重要なことは、シンプルな翻訳アニメーションを理解し、どのようにテキストのようなスタイルのボタンには非常に有用なスキルです.
これらのボタンをライブでチェックアウトGachasphere とGithub repo ). ボタンを使用する場合は、TwitterやGithubにタグを付けてください!このチュートリアルを楽しんだり、質問を残している場合は、コメントを残してください.