すぐに忘れるので画像も文字列も変化するトグルボタン。デザインは適当。
まずはコードから
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<style>
.btn,.btn:checked+label,.btn+label+label
{
display:none;
}
.btn+label,.btn:checked+label+label
{
display:inline-block;
user-select: none;
background-repeat: no-repeat;
}
.btn+label
{
background-color:aqua;
}
.btn:checked+label+label
{
background-color:pink;
}
.btn:active+label,
.btn:active+label+label
{
background-color: lightgray;
}
.vertical+label,.vertical+label+label
{
padding-top: 2em;
background-position:top;
background-size: auto 2em;
}
.horizontal+label,.horizontal+label+label
{
padding-left: 2em;
background-position:left;
background-size: 2em auto;
}
.image+label,.image+label+label
{
height: 2em;
width: 2em;
background-position:center;
background-size: contain;
text-indent:100%;
white-space:nowrap;
overflow:hidden;
}
.text+label,.text+label+label
{
background-position:center;
background-size: 0 0;
}
</style>
<table>
<TR><TH>ボタン</TH><TH>トグル</TH></TR>
<TR><TD>
<input class="btn vertical" type="button" id="1"/>
<label for="1" style="background-image:url(send.png)">メール送信</label>
<hr>
<input class="btn horizontal" type="button" id="2"/>
<label for="2" style="background-image:url(send.png)">メール送信</label>
<hr>
<input class="btn image" type="button" id="5"/>
<label for="5" style="background-image:url(send.png)">メール送信</label>
<hr>
<input class="btn text" type="button" id="6"/>
<label for="6" style="background-image:url(send.png)">メール送信</label>
<hr>
</TD>
<TD>
<input class="btn vertical" type="checkbox" id="3"/>
<label for="3" style="background-image:url(opened.png)">既読メール</label>
<label for="3" style="background-image:url(unopened.png)">未読メール</label>
<hr>
<input class="btn horizontal" type="checkbox" id="4" checked/>
<label for="4" style="background-image:url(opened.png)">既読メール</label>
<label for="4" style="background-image:url(unopened.png)">未読メール</label>
<hr>
<input class="btn image" type="checkbox" id="7"/>
<label for="7" style="background-image:url(opened.png)">既読メール</label>
<label for="7" style="background-image:url(unopened.png)">未読メール</label>
<hr>
<input class="btn text" type="checkbox" id="8"/>
<label for="8" style="background-image:url(opened.png)">既読メール</label>
<label for="8" style="background-image:url(unopened.png)">未読メール</label>
<hr>
</TD></TR>
</table>
</body>
<html>
動作は以下のような感じ
| 普通のボタン | トグルするボタン |
|---|---|
|
|
|
