Course Content

Customizing Training Video Play Button Style with CSS

Murray Gray in Course Content

Dec 09, 2020 - 2 min read. Available on all plans.

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 Advanced 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.

White Play Button on Black Background (High-Contrast)

.play-button-big { background: black!important; }
.play-button-big:after { border-color: transparent transparent transparent white!important; }

Black Play Button on White Background (High-Contrast)

.play-button-big { background: white!important; }
.play-button-big:after { border-color: transparent transparent transparent black!important; }
.page-banner__img .play-btn { filter: invert(100%); opacity:1; }

Add Dropshadow to Play Button

.play-button-big, .page-banner__img .play-btn { width: [object Object]px; height: [object Object]px; background: #F8F8F8; border: solid #BDBDBD 1px; box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.5) ; -webkit-box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.5) ; -moz-box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.5) ; }

Make the video button twice as large

.play-button-big { width: 237px !important; height: 237px !important; }

Make the video button less transparent

By default our video button is slightly translucent. You can turn that off with the following style code:

.play-button-big { background: hsla(0,0%,100%,1); }