ボタン作成 HTML・CSS ボタン作成１サイトに数種類のbuttonをコーディングする時の簡単なやり方。コンポーネント【サンプルコードあり】

button作成　HTML・CSSコーディングの時。いろんなボタンがあるが
多くのサイトは、１サイトで数パターンのボタンが必要に
なる場合が多い。

そんな場合は、まず基本のボタンを１つ作成して、
そのボタンを基本にして作っていくようにしてます。

例えば、下記のボタン。

この３パターンの場合、１番上のボタンを作成して。
下の２つは、変更部分だけをＣＳＳで指定してます。

基本のボタンを作成
ボタンのサイズを大きくします。
ボタン背景色とテキストの色変更
1. 今回書いたコード
フリーランス案件
YouTube動画はこちら

基本のボタンを作成

まずは、基本となるボタンを作成します。

今回書いたコードはこちらになります。

ＨＴＭＬ

<div class="content-wrap">
　<div class="button-wrap">
　　<a href="#" class="c-button">さらに詳しく</a>
　</div>
</div>

　　<a href="#" class="c-button">さらに詳しく</a>

　</div>

ＣＳＳ

@charset "utf-8";
*{
box-sizing: border-box;
}

a{
text-decoration: none;
}

.content-wrap{
width: 100%;
max-width: 800px;
margin: auto;
text-align: center;
}

.button-wrap{
margin: 20px 0;
}

.c-button{
color: #fff;
background-color: #000;
display: inline-block;
font-size: 16px;
padding: 15px 25px;
border-radius: 20px;
}

@charset "utf-8";

box-sizing: border-box;

}

text-decoration: none;

}

.content-wrap{

width: 100%;

max-width: 800px;

margin: auto;

text-align: center;

}

.button-wrap{

margin: 20px 0;

}

.c-button{

color: #fff;

background-color: #000;

display: inline-block;

font-size: 16px;

padding: 15px 25px;

border-radius: 20px;

}

このボタンを基本に使います。

ボタンのサイズを大きくします。

基本のボタンよりサイズの大きいボタン作成。

ＨＴＭＬは先ほどの基本を使います。
classにbigを追加。
テキスト部分を変更。

ＨＴＭＬ

<div class="content-wrap">
　<div class="button-wrap">
　　<a href="#" class="c-button big">大きいサイズ</a>
　</div>
</div>

　　<a href="#" class="c-button big">大きいサイズ</a>

　</div>

次に、ＣＳＳでは下記のようにclass指定して
基本のボタンとの変更点を指定。
今回の場合は、テキストのサイズを18ｐｘにして
ボタンのサイズを大きくしました。

ＣＳＳ

.c-button.big{
font-size: 18px;
padding: 20px 40px;
}

.c-button.big{

font-size: 18px;

padding: 20px 40px;

}

これでOKです。

ボタン背景色とテキストの色変更

次に、ボタンの背景色とテキストの色を変更。

こちらは、classにgreenを追加。

ＨＴＭＬ

<div class="content-wrap">
　<div class="button-wrap">
　　<a href="#" class="c-button green">カラー緑</a>
　</div>
</div>

　</div>

ＣＳＳで、背景色の指定。
テキストの色・太さを変更。
ボタンの丸み具合変更。

CSS

.c-button.green{
background-color: rgb(148, 234, 177);
color: #000;
font-weight: bold;
border-radius: 10px;
}

.c-button.green{

background-color: rgb(148, 234, 177);

color: #000;

font-weight: bold;

border-radius: 10px;

}

複数ページのコーディングになると、このボタンに
限らず、使い回し（コンポーネント）を頭に入れて
作成していった方が効率もいいし、メンテナンスも
やりやすくなる。

やり方は、色々あります。このボタンのコーディングも
１例になります。
他にも何パターンかあるので、
それもまた記事にしていく予定です。

今回書いたコード

よかったら参考にしてください。

ＨＴＭＬ

<body>
　<div class="content-wrap">
　　<div class="button-wrap">
　　　<a href="#" class="c-button">さらに詳しく</a>
　　</div>
　</div>

　<div class="content-wrap">
　　<div class="button-wrap">
　　　<a href="#" class="c-button big">大きいサイズ</a>
　　</div>
　</div>

　<div class="content-wrap">
　　<div class="button-wrap">
　　　<a href="#" class="c-button green">カラー緑</a>
　　</div>
　</div>
</body>

<body>

　　　<a href="#" class="c-button">さらに詳しく</a>

　　</div>

　　　<a href="#" class="c-button big">大きいサイズ</a>

　　</div>

　　</div>

</body>

ＣＳＳ

@charset "utf-8";
*{
box-sizing: border-box;
}

a{
text-decoration: none;
}

.content-wrap{
width: 100%;
max-width: 800px;
margin: auto;
text-align: center;
}

.button-wrap{
margin: 20px 0;
}

.c-button{
color: #fff;
background-color: #000;
display: inline-block;
font-size: 16px;
padding: 15px 25px;
border-radius: 20px;
}

.c-button.big{
font-size: 18px;
padding: 20px 40px;
}

.c-button.green{
background-color: rgb(148, 234, 177);
color: #000;
font-weight: bold;
border-radius: 10px;
}