パーツ番号 07-15-01 ・ CSSのみ

ベーシック中央再生ボタンサムネイル

動画サムネイルの中央に円形の再生ボタンだけを配置したシンプルなデザインです。記事内動画埋め込みのプレースホルダー画像として使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="thumb">
          <span class="playbtn"><span class="tri"></span></span>
        </div>

CSS

.d07-15-01 .thumb{position:relative;width:240px;height:135px;border-radius:10px;overflow:hidden;background:linear-gradient(135deg,#3a4a6b,#1c2438);}
        .d07-15-01 .playbtn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,.3);}
        .d07-15-01 .tri{width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:16px solid #263148;margin-left:4px;}

クラス名 .d07-15-01 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。