最新のWeb開発のチュートリアル
×

CSS チュートリアル

CSS HOME CSS 導入 CSS 構文 CSS の仕方 CSS 色 CSS 背景 CSSボーダー CSS 余白 CSS パディング CSS 高さ/幅 CSS テキスト CSS フォント CSS リンクス CSS リスト CSS テーブル CSS ボックスモデル CSSの概要 CSSの表示 CSS 最大幅 CSSのポジション CSS 浮く CSS Inline-block CSS 整列します CSS コンビネータ CSS 擬似クラス CSS 擬似要素 CSS ナビゲーションバー CSS ドロップダウン CSS ツールチップ CSS イメージギャラリー CSS 画像の不透明度 CSS 画像のスプライト CSS attrのセレクタ CSSフォーム CSS カウンター

CSS3

CSS3 導入 CSS3 角丸 CSS3 ボーダーイメージ CSS3 背景 CSS3 色 CSS3 グラデーション CSS3 影 CSS3 テキスト CSS3 フォント CSS3 2Dトランスフォーム CSS3 3Dトランスフォーム CSS3 トランジション CSS3 アニメーション CSS3 画像 CSS3 ボタン CSS3 ページネーション CSS3 複数の列 CSS3 ユーザーインターフェース CSS3 ボックスのサイズ設定 CSS3 Flexbox CSS3 メディアクエリー CSS3 MQ例

CSS レスポンシブWebデザイン

レスポンシブWebデザイン イントロ レスポンシブWebデザイン ビューポート レスポンシブWebデザイン グリッドビュー レスポンシブWebデザイン メディアクエリー レスポンシブWebデザイン 画像 レスポンシブWebデザイン ビデオ レスポンシブWebデザイン フレームワーク

CSS Examples

CSS 例 CSS クイズ CSS 証明書

CSS References

CSS 参照 CSS セレクタ CSS 機能 CSS リファレンス聴覚 CSS Web Safe フォント CSS アニメーション CSS ユニット CSS PX-EMコンバータ CSS 色 CSS 色値 CSS 色名 CSS3 ブラウザのサポート

 

CSSボタン


CSSを使用して、ボタンのスタイルを設定する方法を学びます。


基本的なボタンのスタイリング

.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}
»それを自分で試してみてください

ボタンの色

使用background-colorボタンの背景色を変更するプロパティ。

.button1 {background-color: #4CAF50;} /* Green */
.button2 {background-color: #008CBA;} /* Blue */
.button3 {background-color: #f44336;} /* Red */
.button4 {background-color: #e7e7e7; color: black;} /* Gray */
.button5 {background-color: #555555;} /* Black */
»それを自分で試してみてください

ボタンのサイズ

使用font-sizeボタンのサイズを変更するプロパティ。

.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
»それを自分で試してみてください

丸みを帯びたボタン

使用border-radiusボタンに丸い角を追加するには、プロパティを:

.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
»それを自分で試してみてください

着色されたボタンの境界線

使用borderボタンに色付きの境界線を追加するには、プロパティを:

.button1 {
    background-color: white;
    color: black;
    border: 2px solid #4CAF50; /* Green */
}
...
»それを自分で試してみてください

Hoverableボタン


使用:hoverあなたはそれの上にマウスを移動すると、ボタンのスタイルを変更するセレクタを。

ヒント:使用するtransition-duration 「ホバー」効果の速さを決定するためのプロパティを:

.button {
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.button:hover {
    background-color: #4CAF50; /* Green */
    color: white;
}
...
»それを自分で試してみてください

シャドウボタン

使用box-shadowボタンに影を追加するには、プロパティを:

.button1 {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.button2:hover {
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
»それを自分で試してみてください

[無効]ボタン

使用opacityボタンに透明度を追加するには、プロパティを(「無効」外観を作成します)。

ヒント:あなたはまた、追加することができますcursorボタンの上にしたときにマウス「駐車禁止看板」を表示しないであろう、「-許可されていない」の値を持つプロパティを:

.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
»それを自分で試してみてください

ボタンの幅


デフォルトでは、ボタンのサイズは(内容の幅など)のテキスト内容によって決定されます。 使用widthボタンの幅を変更するプロパティ。

.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width: 100%;}
»それを自分で試してみてください

ボタングループ

ボタン


余白を削除し、追加float:leftボタングループを作成するために、各ボタンに:

.button {
    float: left;
}
»それを自分で試してみてください

フチボタングループ

ボタン


使用borderボーダーボタングループを作成するには、プロパティを:

.button {
    float: left;
    border: 1px solid green
}
»それを自分で試してみてください

アニメーションボタン

ホバーの矢印を追加します。

»それを自分で試してみてください

クリックの「リップル」の効果を追加します。

»それを自分で試してみてください

クリックで「押された」効果を追加します。

»それを自分で試してみてください