javascriptcssボタン

| | | | | | | |

Webサイトをデザインするとき、特定の方法で表示したいボタンがよくあります。たとえば、ボタンにページ上の他の要素よりも背景色を付けて、ユーザーの注意をボタンに引き付けることができます。

CSSを使用して、開発者はスタイル付きのボタンを作成できます。 CSSを使用すると、特に変更できます。

ボタンの色、テキストサイズ、境界線、幅、高さ。このチュートリアルでは、一連のCSSプロパティを使用してHTMLのスタイルを設定する方法について説明します。ボタン。このチュートリアルを読み終える頃には、CSSを使用したボタンのスタイリングのエキスパートになります。

ボタンの概要

ボタンはさまざまなHTMLの方法で定義できます。最も一般的な2つのアプローチは、 ブートキャンプの一致を見つける

ボタンのスタイルを設定する場合、つまりページの外観をカスタマイズする場合は、cssを使用する必要があります。この記事では、ボタンで次の操作を行う方法について説明します。..< / p>

  • 背景色を変更する
  • テキストの色を変更する
  • テキストのサイズを変更する。
  • パディングを追加する。
  • 角を曲がる。
  • 色付きの境界線を追加する。
  • 使用する:....ホバー機能
  • 影を追加する
  • 幅を変更する
  • オフにする
  • アニメーション化する。

水平ボタンと垂直ボタンのグループを作成する方法についても説明します。

戻る-平面の色

ボタンのデザイン中に、最初に行うことは、背景色を設定することです-ボタンの計画。デフォルトでは、ボタンの背景は白で、黒のテキスト。CSSの背景色を使用して、cボタンの背景色を変更します。

Webサイトのボタンをデザインしていて、ボタンの背景をピンクにしたいとします。次のCSSコードを使用して、ボタンの色を変更できます。

コードは次を返します:

Screen Shot 2020 04 03〜13.10.32
スクリーンショット20200325から08.39.39

border-radiusプロパティを使用して、角が丸い長方形のボタンを作成できます。次に、border-radiusプロパティを使用する3つのコード例を示します。さまざまな半径サイズの効果を説明するために、各例ではさまざまなサイズの境界半径を使用しています。

コードは次を返します:

Screen Shot 2020 03 25 at 08.49.42