[CSS] 最新 CSS ボタンの基礎入門（译）_html/css_WEB-ITnose

原アドレス

翻訳: 最新 CSS ボタンの基本の紹介

ボタンは Web ページを構築する際に最も重要なコンポーネントの 1 つであり、さまざまな状態や機能に合わせてさまざまなデザイン オプションがあります。この記事では、CSS とデザイン ツールを使用して、新しい開発者が独自のボタンを作成できるようにする 3 つのスタイルのボタン デザイン アイデアを紹介します。

さまざまなボタンのデザインのアイデアに入る前に、CSS ボタンの基本についての理解を強化する必要があります。コンポーネントに対する CSS の影響を理解していなければ、フラット UI とマテリアル デザインの前述の違いを理解したとしても、あまり役に立ちません。

それでは、基本的な CSS ボタンを簡単に確認してみましょう。

CSS ボタンの基本

良いボタンを構成する基準は Web サイトごとに異なりますが、技術的ではない基準もいくつかあります。

1. アクセシビリティ – これは非常に重要です。ボタンは、障害のある人や古いブラウザにとっても優れたアクセシビリティを備えている必要があります。 Web のオープン性は素晴らしいことですが、怠惰な CSS でそれを台無しにしないでください。
2. シンプルなテキスト – ボタンのテキストを可能な限り単純化します。ユーザーは、ボタンが何をするのか、どこに移動するのかをすぐに理解できる必要があります。

ウェブ上で目にするほぼすべてのボタンでは、色の変更、遷移時間、境界線や影の変更が使用されています。これらの効果は、CSS 疑似クラスを通じて実現できます。次の 2 つの :hover と :active に焦点を当てます。 :hover 疑似クラスは、マウスがターゲットをオーバーレイしたときに CSS が行うべき動作を定義します。 :active は通常、ユーザーがクリックしてからマウスを放すまでの間にアクションを実行します。

疑似クラスを使用すると、ボタンの外観を完全に変更できますが、これはユーザーフレンドリーな方法ではありません。初心者にとって良いアプローチは、ボタンをできるだけオリジナルのままにしながら、ボタンにいくつかの小さくて簡単な変更を加えることです。基本的なポイントは、カラー、シャドウ、変換時間の 3 つです。

基本ポイント 1 – カラー

これは最も一般的な変更の 1 つです。プロパティを通じて色を変更できます。その中で最も単純なものは、color、background-color、border プロパティです。例を始める前に、ボタンの色の選択方法に焦点を当てましょう:

1. 色の構成 – 異なる色を並べて使用します。 Colorhexa は、一致する色を見つけるための優れたカラー管理ツールです。まだ決めていない場合は、フラット UI カラー ピッカーをチェックしてインスピレーションを得てください。

2. 絵の具を合わせる – これは、どのパレットを使用しているとしても素晴らしいアイデアです。カラーパレットを使用していない場合は、lolcolors をチェックしてください。

基本ポイント 2 – 影

box-shadow は、ターゲットの周囲に影を追加します。フラット UI とマテリアル デザインの両方で使用されるデザインで、各面に異なる影を追加できます。 box-shadow について詳しく知りたい場合は、MDN box-shadow ドキュメントを参照してください。

基本ポイント 3 – 遷移時間

transition-duration を使用すると、CSS 変更効果のタイムテーブルを追加できます。遷移時間のない CSS 疑似クラス:hover はすぐに有効になるため、ユーザーにとって不快になる可能性があります。このチュートリアルでは、遷移時間を使用して、ボタンのアニメーションを自然に感じさせます。

次の例では、疑似クラス :hover アニメーション効果を徐々に実装するのに 0.5 秒以上かかります。

すごいです

次のようになります:

CodePen の SitePoint (@SitePoint) によるトランジションを備えたペン ボタンを参照してください

トランジション効果を実装するコードは少し複雑なので、古いブラウザーで実現される効果は異なる場合があります。少し違います。したがって、ブラウザごとに異なるプレフィックスを追加する必要があります。

すごいです

CSS を実装するためにトランジションを使用する複雑で興味深い方法はたくさんありますが、この例は単なる基本です。

3 つのボタン スタイル

1 — シンプルな白黒

CodePen の SitePoint (@SitePoint) によるペン スーツとネクタイ ボタンの例を参照してください

これは通常、さまざまなボタンであるため、プロジェクトに追加する最初のボタンです。マッチするスタイルを。黒と白のコントラストをうまく活かしたスタイルです。

これら 2 つの変更は似ているため、コードを使用して白の背景に黒のテキストでボタンを表示します。別の効果を得るには、コード内の白と黒を交換するだけです。

.color-change {  border-radius: 5px;  font-size: 20px;  padding: 14px 80px;  cursor: pointer;  color: #fff;  background-color: #00A6FF;  font-size: 1.5rem;  font-family: 'Roboto';  font-weight: 100;  border: 1px solid #fff;  box-shadow: 2px 2px 5px #AFE9FF;  transition-duration: 0.5s;  -webkit-transition-duration: 0.5s;  -moz-transition-duration: 0.5s;} .color-change:hover {  color: #006398;  border: 1px solid #006398;  box-shadow: 2px 2px 20px #AFE9FF;} 

上記の例では、transition-duration を設定することで、フォントと背景色の変更が 0.2 秒以内に発生することがわかります。これは非常に単純な例です。この例から始めて、自分にインスピレーションを与えるブランドから色を選択できます。 BrandColors を通じて、お気に入りのブランドカラーを入手できます。

2 — Flat UI buttons

Flat UI 注重于极简主义，通过小的变化阐述一个丰富的故事。当我的项目开始成型后我会把黑白按钮向 Flat UI 按钮迁移。Flat UI 按钮朴素到足够适配大部分设计。

接下来让我们改善我们的按钮，通过给按钮添加位移来模拟 3D 按钮。

<p data-height="265" data-theme-id="0" data-slug-hash="qZzYrg" data-default-tab="css,result" data-user="SitePoint" data-embed-version="2" class="codepen">SeethePen <a href="http://codepen.io/SitePoint/pen/qZzYrg/">FlatUIButtons</a> bySitePoint (<a href="http://codepen.io/SitePoint">@SitePoint</a>) on <a href="http://codepen.io">CodePen</a>.</p><scriptasyncsrc="//assets.codepen.io/assets/embed/ei.js"></script> 

这个例子包括五个按钮，他们之前的差异只是颜色不同，所以让我们关注第一个按钮即可。

.turquoise {  margin-right: 10px;  width: 100px;  background: #1abc9c;  border-bottom: #16a085 3px solid;  border-left: #16a085 1px solid;  border-right: #16a085 1px solid;  border-radius: 6px;  text-align: center;  color: white;  padding: 10px;  float: left;  font-size: 12px;  font-weight: 800;} .turquoise:hover {  opacity: 0.8; } .turquoise:active {  width: 100px;  background: #18B495;  border-bottom: #16a085 1px solid;  border-left: #16a085 1px solid;  border-right: #16a085 1px solid;  border-radius: 6px;  text-align: center;  color: white;  padding: 10px;  margin-top: 3px;  float: left;} 

这个按钮有三种状态，普通的（没有状态）， :hover和 :active。

值得注意的是， :hover状态只有一行代码，用于降低透明度。这是一个有用的技巧，当你需要一个更透明的颜色时不需要额外去寻找即可。

CSS 中的变量并不是新的，但使用了一些小的技巧。通过给 border-bottom, border-left, 和 border-right设置 3D 深度效果取代以往统一设置的边框属性。

对于Flat UI按钮来说， :active能起到很重要的作用。在我们的例子中，使用 :active起到了两个变化。

1. border-bottom从 3px变为 1px。这会导致按钮下面的阴影收缩并且降低整个按钮的像素。虽然代码简单，但这个改变会使得用户认为他们点击了页面中的按钮。

2. 颜色的变化。将背景颜色变暗，模拟按钮远离用户并朝着页面前进的运动轨迹。再次重申，细微的改变会暗示用户他们点击了这个按钮。

对于 Flat UI 按钮来说，简单和微小的变化能传达出重要的含义，许多人用 border-bottom创造移动轨迹。值得注意的是，一些扁平化按钮不需要移动效果只需要改变颜色即可。

3 — Material Design

Material Design 是一种利用卡片传达信息和移动的设计观念。谷歌设计了 Material Design，并把其中的三个主要准则列在了 Material Design Homepage中。

• Material is a metaphor
• Bold, graphic, intentional
• Motion provides meaning

为了更好的理解这三个准则，让我们用 Material Design 进行实际练习。

See the Pen Material Design Buttons With Polymerby SitePoint ( @SitePoint) on CodePen.

这些按钮主要设计两个方面 – box-shadow和 Polymer。

Polymer是一种用于构建网站的组件化框架工具。如果你熟悉Bootstrap，那么Polymer对你来说也是很熟悉的。实现下面这个强大的效果只需要一行代码。

<divclass="button">  <divclass="center" fit>SUBMIT</div>  <paper-ripplefit></paper-ripple> /*this is the line that adds a ripple effect with polymer */</div> 

是非常受欢迎的框架和组件，通过引入我们 HTML 头部的 Polymer 可以访问这个流行的框架和组件，请从 Polymer project homepage了解更多知识。

现在我们了解了 polymer 以及刚才那些酷炫的效果来自哪里（关于他是如何工作的改日再谈），让我们通过这个按钮来讨论那些用于实现 Material Design 的 CSS。

body {  background-color: #f9f9f9;  font-family: RobotoDraft, 'Helvetica Neue';} /* Button */.button {  display: inline-block;  position: relative;  width: 120px;  height: 32px;  line-height: 32px;  border-radius: 2px;  font-size: 0.9em;  background-color: #fff;  color: #646464;  margin: 20px 10px;  transition: 0.2s;  transition-delay: 0.2s;  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);} .button:active {  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);  transition-delay: 0s;} /* Misc */.button.grey {  background-color: #eee;}.button.blue {  background-color: #4285f4;  color: #fff;}.button.green {  background-color: #0f9d58;  color: #fff;}.center {  text-align: center;} 

这些按钮在设计中大量使用 box-shadow，让我们研究 box-shadow是如何通过移除那些没有改变的 CSS 进行不可思议的改变和工作。

.button {  transition: 0.2s;  transition-delay: 0.2s;  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);}.button:active {  transition-delay: 0s;  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);} 

box-shadow通常用于在按钮的左边框和底部边框放置一层阴影。当用户点击的时候，这个阴影会进一步延伸，变得更加透明。这个运动模拟了按钮的 3D 阴影从页面向用户移动。这些运动体现了 Material Design 风格和行动准则的一部分。

通过结合 polymer 和 box-shadow的效果，可以构造出 Material Design 风格的按钮。

• Material is a metaphor– 通过使用 box-shadow我们能够模拟出现实世界中的 3D 阴影效果。

• Bold, graphic, intentional– 这使得那些明亮的蓝色和绿色按钮以及那些完全填充的设计变得更加真实

• Motion provides meaning– 通过结合 polymer 和 box-shadow的过渡效果，当用户点击按钮的时候我们可以创造出更多的效果。

本文介绍了用三种设计方法来构建按钮。如果你希望构建你自己的按钮风格，我建议你使用 CSS3 按钮生成器。

概要

黒と白のボタンはシンプルですが確実です。白と黒をブランドカラーに置き換えると、Web サイトに関連した新しいボタンをすぐに作成できます。フラットUIのボタンもシンプルで、シンプルな動きと色で豊かな効果を生み出します。マテリアル デザイン ボタンは、現実世界の影をシミュレートする複雑な動きを作成するためにズームインおよびズームアウトすることでユーザーの注意を引きます。

このガイドが、CSS を初めて使用する開発者が強力で創造的なボタンを作成する方法を理解するのに役立つことを願っています。