【初心者でも簡単】CSSで再生ボタンを作る

どうも7noteです。動画が流行っているので再生ボタンを作ってみました。

動画の再生ボタンを独自で作成したい時用に、「再生ボタン」を作ってみました。

クリックで再生停止も操作できるようにクリックしたら一時停止の見た目に変わるようにします。

ソース

index.html

<div class="btn"></div>

style.css

.btn {
  width: 100px;  /* 幅を指定 */
  height: 60px;  /* 高さを指定 */
  background: #F00; /* 背景色を赤に指定 */
  border-radius: 10px; /* 角を丸くする */
  position: relative;  /* 基準位置とする */
  cursor: pointer;     /* マウスカーソルを指（👆）の形にする */
}

.btn::after {
  content: ''; /* 疑似要素に必須 */
  width: 0;    /* 幅を0に指定 */
  height: 0;   /* 高さを0に指定 */
  border-style: solid;  /* 線の種類を指定 */
  border-width: 15px 0 15px 30px;  /* 線の幅を指定して三角を作る */
  border-color: transparent transparent transparent #fff;  /* 左のみ線の色を指定 */
  position: absolute; /* 相対位置に指定 */
  top: 50%;  /* 上から50%の位置に配置 */
  left: 50%; /* 左から50%の位置に配置 */
  transform: translate(-50%,-50%); /* 要素の半分ぶんだけ左上方向に移動。 */
}

.btn.playback::after {
  width: 15px;  /* 幅を指定 */
  height: 30px; /* 高さを指定 */
  border-width: 0 4px 0 4px; /*線を左右に指定*/
  border-color: transparent #fff transparent #fff;  /* 左右に線の色を指定 */
  transition: .5s; /* アニメーションの秒数を指定 */
}

script.js

$(function () {
  $('.btn').on('click', function(){  // クリックされた時
    $(this).toggleClass('playback'); // クラスを 付与する or 外す
  });
});

まとめ

背景を使わずに、▶と||だけでも十分利用できると思います。
movieタグなどで利用する場合はデフォルトの再生ボタンは非表示にしておきましょう。

【iosのデフォルト再生ボタンを非表示にする方法】
https://qiita.com/YukiYuki0508/items/651e70b50c278b16cfa1

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ