ミギムキ

[CSS] 動画の再生・一時停止アイコンをCSSだけで描きたい

動画の再生・一時停止アイコン

再生アイコンのサンプルコード

html

<span class="video_play"></span>
スポンサー広告

CSS

.video_play { display: inline-block; position: relative; width: 1em; height: 1em; border: 0.05em solid currentColor; border-radius: 50%; color: #000; font-size: 200px; } .video_play::before { position: absolute; top: 50%; left: 30%; transform: translateY(-50%); width: 0px; height: 0px; border: 0.3em solid transparent; border-left: 0.5em solid currentColor; box-sizing: border-box; content: ""; }

一時停止アイコンのサンプルコード

html

<span class="video_pause"></span>

CSS

.video_pause { display: inline-block; position: relative; width: 1em; height: 1em; border: 0.05em solid currentColor; border-radius: 50%; color: #000; font-size: 200px; } .video_pause::before, .video_pause::after { position: absolute; top: 50%; transform: translateX(-50%) translateY(-50%); width: 0.1em; height: 0.5em; box-sizing: border-box; background-color: currentColor; content: ""; } .video_pause::before { left: 40%; } .video_pause::after { left: 60%; }

クリックしたときに再生⇔一時停止を表示切り替えするアイコン

html

<label class="video_play_pause"> <input type="checkbox"> <span></span> </label>
スポンサー広告

CSS

.video_play_pause { display: inline-block; position: relative; width: 1em; height: 1em; border: 0.05em solid currentColor; border-radius: 50%; color: #000; font-size: 200px; } .video_play_pause > input { display: none; } .video_play_pause > input:not(:checked) + span::before { position: absolute; top: 50%; left: 30%; transform: translateY(-50%); width: 0px; height: 0px; border: 0.3em solid transparent; border-left: 0.5em solid currentColor; box-sizing: border-box; content: ""; } .video_play_pause > input:checked + span::before, .video_play_pause > input:checked + span::after { position: absolute; top: 50%; transform: translateX(-50%) translateY(-50%); width: 0.1em; height: 0.5em; box-sizing: border-box; background-color: currentColor; content: ""; } .video_play_pause > input:checked + span::before { left: 40%; } .video_play_pause > input:checked + span::after { left: 60%; }

CSSでアイコンを描いてみるシリーズ

スポンサー広告