戻る

buttonタグを枠なし背景なしの透過色にする

透過色ボタンに変更する処理

枠線を非表示にします。
背景色を透過色にします。

1

2

3

4

[ボタンを選択した結果]

[HTML]
<table> <tr> <td><button id="b1" class="btn_clear">1</td> <td><button id="b2" class="btn_border_color_none">2</td> <td><button id="b3" class="btn_border_color_green">3</td> <td><button id="b4" class="btn_border_none_color_green">4</td> </tr> </table> [ボタンを選択した結果]<br> <label id="lbl1"></label>

[CSS]
.btn_clear { border: none; background-color: transparent; width:100px; height:100px; } .btn_border_color_none { background-color: transparent; width:100px; height:100px; } .btn_border_color_green { background-color: rgb(34 139 34 / 0.7); width:100px; height:100px; } .btn_border_none_color_green { border: none; background-color: rgb(34 139 34 / 0.7); width:100px; height:100px; }

[javascript]
copy

const b1 = document.getElementById("b1");
const b2 = document.getElementById("b2");
const b3 = document.getElementById("b3");
const b4 = document.getElementById("b4");
b1.addEventListener("click", () => 
{
	tapButton(1);
});
b2.addEventListener("click", () => 
{
	tapButton(2);
});
b3.addEventListener("click", () => 
{
	tapButton(3);
});
b4.addEventListener("click", () => 
{
	tapButton(4);
});
function tapButton(no)
{
	let text = "";
	switch(no)
	{
		case 1:
			text ="枠線なし/背景色なし";
			break;
		case 2:
			text ="枠線あり/背景色なし";
			break;
		case 3:
			text ="枠線あり/背景色あり";
			break;
		case 4:
			text ="枠線なし/背景色あり";
			break;
	}
	const lbl1 = document.getElementById("lbl1");
	lbl1.innerText = text;
}

戻る

back

Set the button tag to a transparent color with no border or background

Process to change to transparent color button

Hide the border.
Set the background color to transparent.

1

2

3

4

[Result of selecting the button]

[HTML]
<table> <tr> <td><button id="b1" class="btn_clear">1</td> <td><button id="b2" class="btn_border_color_none">2</td> <td><button id="b3" class="btn_border_color_green">3</td> <td><button id="b4" class="btn_border_none_color_green">4</td> </tr> </table> [Result of selecting the button]<br> <label id="lbl1"></label>

[CSS]
.btn_clear { border: none; background-color: transparent; width:100px; height:100px; } .btn_border_color_none { background-color: transparent; width:100px; height:100px; } .btn_border_color_green { background-color: rgb(34 139 34 / 0.7); width:100px; height:100px; } .btn_border_none_color_green { border: none; background-color: rgb(34 139 34 / 0.7); width:100px; height:100px; }

[javascript]
copy

const b1 = document.getElementById("b1");
const b2 = document.getElementById("b2");
const b3 = document.getElementById("b3");
const b4 = document.getElementById("b4");
b1.addEventListener("click", () => 
{
	tapButton(1);
});
b2.addEventListener("click", () => 
{
	tapButton(2);
});
b3.addEventListener("click", () => 
{
	tapButton(3);
});
b4.addEventListener("click", () => 
{
	tapButton(4);
});
function tapButton(no)
{
	let text = "";
	switch(no)
	{
		case 1:
			text ="No border/No background color";
			break;
		case 2:
			text ="With border/No background color";
			break;
		case 3:
			text ="With border/with background color";
			break;
		case 4:
			text ="No border/with background color";
			break;
	}
	const lbl1 = document.getElementById("lbl1");
	lbl1.innerText = text;
}

back