Change Mobile Play Button Color for Video Background Plugin

The default button color for mobile play button is black. You can change the color by following these instruction

1) Click into “design” and into “edit html/css”

2) Click into “main_style.css” to open the CSS page

3) Locate this code:

.playlist {
background: rgba(0,0,0,0.4);
display: inline;
padding: 20px;
margin: 0 auto;
}
.playlist:hover {
background: rgba(0,0,0,1);

4) Change color code for Button

.playlist {
background: rgba(0,0,0,0.4);
display: inline;
padding: 20px;
margin: 0 auto;
}

Here we use an rgb color code that allow us to control the opacity of the button.

The default color is black (0,0,0). Here you can change the highlighted part to any rgb color code you want.

The last digital (0.4) control the opacity of the button. 1 being completely solid and 0 being completely transparent, you can choose any decimal number between Zero and One to control the opacity of your button

5) Change color code for Hover Button

.playlist:hover {
background: rgba(0,0,0,1);

Here we use an rgb color code that allow us to control the opacity of the button.

The default color is black (0,0,0). Here you can change the highlighted part to any rgb color code you want.

The last digital (1) control the opacity of the button. 1 being completely solid and 0 being completely transparent, you can choose any decimal number between Zero and One to control the opacity of your button

 

6) Save & publish your site for the change to take effect

Tags: