CSSでボタンを透明や半透明にする方法

「ボタンの上にマウスが乗ったときに透明や半透明にしたい。でも透明ってどうやるんだ？」

CSSでボタンを透明にする方法を解説します。

【前提】有色のボタン

下記のようなボタンを用意しました。

透明になったことを確認できるように背景画像も用意しました。

目的に応じて透明にしていきましょう。

<style>
.exampleback{
    display: flex;
    justify-content:center;
    align-items: center;
    height: 200px;
    background: url(https://csshtml.work/wp-content/uploads/cat.jpg) no-repeat center center / cover;
}
.example{
    display: block;
    width: 200px;
    background: #1973cc;
    border: 2px solid #FFF;
    padding: 20px;
    text-align: center;
    text-decoration: none;
    color: #FFF;
    font-size: 120%;
    font-weight: bold;
}
</style>
<div class="exampleback">
    <a class="example" href="#">ボタン</a>
</div>

背景色を透明にする

「background: transparent」を指定します。またはbackgroundの未指定です。

.example{
    display: block;
    width: 200px;
    /*コレ*/background: transparent;
    border: 2px solid #FFF;
    padding: 20px;
    text-align: center;
    text-decoration: none;
    color: #FFF;
    font-size: 120%;
    font-weight: bold;
}

「transparent」は「透明」です。色の指定に「red」や「green」のように色の名前で直接指定する方法がありますがそれの「透明」の指定です。「#」はいりません。

「transparent」は予測変換されない場合が多いためスペルミスには気を付けましょう。

「transparent」は背景だけではなく、文字や線など色を指定するCSSで使えます。

なお、background-colorの初期値は「transparent」ですので、background-colorを指定しなければ透明になります。

背景色を半透明にする

「background: rgba(xx,xx,xx,0.5)」のようにrgbaで指定します。

.example{
    display: block;
    width: 200px;
    /*コレ*/background: rgba(44,125,212,0.5);
    border: 2px solid #FFF;
    padding: 20px;
    text-align: center;
    text-decoration: none;
    color: #FFF;
    font-size: 120%;
    font-weight: bold;
}

まず、rgbは赤緑青の3色で色を表現する方法です。これにaつまりアルファ値（透明値）を追加してrgbaです。

aの部分は小数点で0～1の数値を指定します。0ほど透明で1ほど有色です。

rgbaを指定するとき「,」コンマや「.」小数点が出てくるため間違わないように気を付けましょう。

rgbaは背景だけではなく、文字や線など色を指定するCSSで使えます。

ボタン全体を半透明にする

「opacity:0.5」のように指定します。

.example{
    /*コレ*/opacity: 0.5;
    display: block;
    width: 200px;
    background: #1973cc;
    border: 2px solid #FFF;
    padding: 20px;
    text-align: center;
    text-decoration: none;
    color: #FFF;
    font-size: 120%;
    font-weight: bold;
}

opacityは文字や線も含め要素全体を半透明にするCSSです。

小数点で0～1の数値を指定します。0ほど透明で1ほど有色です。

線を透明にする

border-colorをtransparentやrgbaで指定します。

<style>
.example{
    display: block;
    width: 200px;
    background: #1973cc;
    /*コレ*/border: 2px solid transparent;
    padding: 20px;
    text-align: center;
    text-decoration: none;
    color: #FFF;
    font-size: 120%;
    font-weight: bold;
}
</style>

線は「border:none」や「border:0」で消えますが、マウスオーバー時に線が現れるようにするときは線の幅を保っておきたいものです。

そんなとき線の色を透明にする方法があります。

先に紹介したtransparentです。

また同様にrgbaも指定できます。

【まとめ】ボタンを透明や半透明にする方法

• 背景色を透明にするにはbackground:transparent
• 背景色を半透明にするにはbackground:rgba(xx,xx,xx,0.5)
• ボタン全体を半透明にするにはopacity:0.5
• 線を透明にするにはborder-color:transparent

以上、CSSでボタンを透明や半透明にする方法でした。