Course Content

Customize Training Video Play Button Style with CSS

Murray Gray in Course Content

Aug 01, 2023 - 1 min read. Available on Growth Plan or Higher.

Table of Contents

Customizing Your Video Play Button Styles

We've created some great video button styles for you that you can apply to your membership site experience.

To get started:

  • Open any course and open the Course Settings section
  • Open the CSS sub-section
  • Set the Enable Custom CSS For This Course toggle to ON (green)
  • You should then see the CSS field appear. Add your CSS code to that box alongside any other code you may have already added to it. Add in as many rules as you wish!

Double-Sized Play Buttons

.player__play-btn .cursor-pointer {
  width:100px !important;
  height:100px !important;

To increase the size of your play buttons even further, increase the 100 number above to 200, or even higher if you wish.

White Play Button on Black Background (High-Contrast)

.player__play-btn .cursor-pointer { color:black !important; }
.player__play-btn:before { background: white !important; }

Black Play Button on White Background (High-Contrast)

.player__play-btn .cursor-pointer { color:white !important; } .player__play-btn:before { background: black !important; }

Add Dropshadow to Play Button

.player__play-btn:before {
box-shadow: 15px 15px 20px black !important;
-webkit-box-shadow: 15px 15px 20px black !important;
-moz-box-shadow: 15px 15px 20px black !important;

Lots of people found these next topics pretty useful...