HTMLとCSSで作る立体的なウォシュレットボタン（フリーアイコン付き）

記事内に商品プロモーションが含まれる場合があります

とあるお店のトイレでウォシュレットを使ったときに、「止」ボタンが効かなくなりました。経験したことのある方なら分かると思いますが、その絶望感たるや、筆舌しがたいものがあります。「やわらか」モードは機能していたのが不幸中の幸いでした。2分ほどの格闘の末、立ち上がると同時に便器のふたを閉め、素早くコンセントを抜くことで事なきを得ました。しかし、今でも「止」「おしり」「やわか」「ビデ」のあのボタンが脳裏から離れません。そこで、せっかくなので「ウォシュレット」のあのアイコンを作成してみました。無料素材として配布するのでご活用くださいませ。※ 特許情報プラットフォームで調べたところ、アイコンについては商標権などは取られていないようでした。

無料ウォシュレットボタン素材

データ形式はPNG、EPS、ai、SVGを用意しました。PNGの場合、ボタンごとダウンロードができます。以下のリンクからダウンロードしてくださいませ。

ダウンロード

SVGコードの場合、ファイルをダウンロードしなくても、コードをコピペすることでWebページに表示できます。

SVGコード

2. 使用例

SVGコードを使って立体感のあるボタンを作ってみました。下の画像と連動しています。よろしければ押してみてください。

※ 「止」を押しても止まらない場合があります。ご了承ください。

止

おしり

やわらか

ビデ

コード

上で紹介したボタンは次のようなHTML＆CSSで立体感を表現しています。

HTML

<div class="btns">
	<p>止</p>
	<a class="wash_btn stop_btn">
		<SVGコードをコピペ>
	</a>
</div>

<div class="btns">
	<p>おしり</p>
	<a class="wash_btn">
		<SVGコードをコピペ>
	</a>
</div>

<div class="btns">
	<p>やわらか</p>
	<a class="wash_btn">
		<SVGコードをコピペ>
	</a>
</div>

<div class="btns">
	<p>ビデ</p>
	<a class="wash_btn">
		<SVGコードをコピペ>
	</a>
</div>

CSS

.btns {
	width: 130px;
    display: inline-block;
    text-align: center;
    }

.btns p {
	margin:0.5em 0;
	font-size: 23px;
	font-family: 'ＭＳ Ｐゴシック','MS PGothic','ヒラギノ丸ゴ ProN','Hiragino Maru Gothic ProN','ヒラギノ角ゴシック','Hiragino Sans',sans-serif;
}

.wash_btn {
    display: inline-block;
    text-decoration: none;
    background: #EFEFEF;/*背景色*/
    width: 130px;/*幅*/
    height: 130px;/*高さ*/
    padding: 15px;/*ボタン内の余白*/
    border-radius: 50%;/*丸くする*/
    box-sizing: border-box;
    text-align: center;/*文字を中央に*/
    border: solid 2px #EFEFEF;
    box-shadow: 4px 4px 9px 0px rgba(255,255,255,0.45) inset, -4px -4px 9px 0px rgba(0, 0, 0, 0.06) inset;/*ボタンに立体感を出す*/
    cursor: pointer;/*カーソル当てたときの動き*/
    transition: .3s;/*押したときの動きを滑らかに*/
}

.wash_btn:active {/*ボタンを押したとき*/
    box-shadow: 3px 3px 6px 0px rgba(157, 157, 157, 0.07) inset, -2px -2px 3px 0px rgba(255, 255, 255, 0.52) inset;/*影を変化させる*/
}

.stop_btn {/*止ボタン用*/
    background: #f7aa5d;/*色をオレンジに*/
    border: solid 3px #ffcb97;
    box-shadow: 7px 7px 14px 0px rgba(255,255,255,0.35) inset, -7px -7px 14px 0px rgba(0, 0, 0, 0.06) inset;
}

「使いどころはあるのか」とか聞かないでください。トイレ関係のブログを運営している方、メディアさんは是非ご活用くださいませ。※ちなみにトイレに座っているお兄さんのアイコンは、配布素材ではないのでコードを載せることができません。