Customize Your Interactive Video Buttons with CSS

Are you ready to take your videos to the next level without any fancy software or advanced tech know-how? With our Interactive Studio, you hold the power to weave together captivating video experiences for your audience in no time. Now, picture this: you're watching your videos, and those buttons you see – they're good, but they could be amazing, right? That's where the magic of Custom CSS steps in.

In the following guide, we're about to unlock a world of possibilities together. We'll explore how you can effortlessly make those buttons pop and harmonize perfectly with your video's style using Custom CSS. Get ready to infuse your videos with your unique flair!

Targeting Elements

Now that we're equipped with a bit of CSS wisdom, let's delve into the exciting world of customizing specific elements within your Interactive Videos. Get ready to add your unique touch to every button and layout!

Mastering the "Overlay"

You know that sleek darkened layer that enhances the visibility of your Question Text and Call-to-Action Buttons, making your video truly pop? This is the Layout Overlay. To give it a makeover, simply target it using the following class:

To target this, you need to call the following class:

.layout-overlay {  }

Once you've got it in your sights, you're free to unleash your creativity. In this example, we're making a bold move by removing the overlay altogether:

.layout-overlay { display: none; }

Navigating "Multiple Choice"

The heart of Interactive Videos lies in viewer engagement. It's like those captivating 'Choose Your Own Adventure' stories, where every choice matters. To style the buttons guiding these choices, you'll want to target the following classes:

/* All Multiple Choice Buttons */
.layout-button {  }

/* Only Primary Multiple Choice Buttons */
.layout-button.btn–primary {  }

/* Only Secondary Multiple Choice Buttons */
.layout-button.btn–secondary {  }

And that's not all – if you're exploring different layouts or the number of buttons on display, we've got you covered:

/* Left Layout */
.left.layout.layout-button {  }

/* Center Layout */
.center.layout.layout-button {  }

/* Right Layout */
.right.layout.layout-button {  }

Even the Question Text above the buttons can get a touch of your style:

.layout-question {  }

Call-to-Action Buttons

The Interactive Studio offers a variety of buttons, but the Traditional ones steal the spotlight. They seamlessly blend your theme's Primary or Secondary colors, elegantly laying over your video. Here's how to target them:

/* All Traditional Buttons */
.lsvt-interactive-button {  }

/* Only Primary Buttons */
.lsvt-interactive-button.btn-primary {  }

/* Only Secondary Buttons */
.lsvt-interactive-button.btn-secondary {  }

Now that you've mastered the art of targeting elements, the stage is yours. Go ahead, create an Interactive Video masterpiece that's uniquely yours! 🎬✨

Putting It All Together: An Example

Ready to witness the magic of Custom CSS in action? The below example showcases how you can transform the look of buttons within your Interactive Video.

Now, let's dive into the code and see the transformation unfold. This code covers both Primary and Secondary buttons for Multiple Choice interactions and Call-to-Action moments.

/* INTERACTIVE QUESTIONS */
.layout-question {
  font-size: 1.5em !important
  text-shadow: 0px 4px 8px rgba(0,0,0,0.3) !important;;
}

/* INTERACTIVE VIDEO BUTTONS */
.layout-button.btn-primary,
.lsvt-interactive-button.btn-primary,
.layout-button.btn-secondary,
.lsvt-interactive-button.btn-secondary {
  align-items: center !important;
  appearance: none !important;
  background-clip: padding-box !important;
  background-color: initial !important;
  background-image: none !important;
  border-style: none !important;
  box-sizing: border-box !important;
  color: #fff !important;
  outline: none !important;
  overflow: visible !important;
  position: relative !important;
  text-transform: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  touch-action: manipulation !important;
  vertical-align: middle !important;
  word-break: keep-all !important;
  z-index: 0 !important;
}

.layout-button.btn-primary:before,
.lsvt-interactive-button.btn-primary:before,
.layout-button.btn-secondary:before,
.lsvt-interactive-button.btn-secondary:before,
.layout-button.btn-primary:after,
.lsvt-interactive-button.btn-primary:after,
.layout-button.btn-secondary:after,
.lsvt-interactive-button.btn-secondary:after {
  border-radius: 80px !important;
}

.layout-button.btn-primary:before,
.lsvt-interactive-button.btn-primary:before,
.layout-button.btn-secondary:before,
.lsvt-interactive-button.btn-secondary:before {
  background-image: linear-gradient(92.83deg, #ff7426 0, #f93a13 100%) !important;
  content: "";
  height: 100% !important;
  left: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  top: 0 !important;
  width: 100% !important;
  z-index: -2 !important;
}

.layout-button.btn-primary:after,
.lsvt-interactive-button.btn-primary:after,
.layout-button.btn-secondary:after,
.lsvt-interactive-button.btn-secondary:after {
  background-color: initial !important;
  background-image: linear-gradient(#541a0f 0, #0c0d0d 100%) !important;
  bottom: 4px !important;
  content: "";
  left: 4px !important;
  overflow: hidden !important;
  position: absolute !important;
  right: 4px !important;
  top: 4px !important;
  transition: all 100ms ease-out !important;
  z-index: -1 !important;
}

.layout-button.btn-primary:hover:not(:disabled):before,
.lsvt-interactive-button.btn-primary:hover:not(:disabled):before,
.layout-button.btn-secondary:hover:not(:disabled):before,
.lsvt-interactive-button.btn-secondary:hover:not(:disabled):before {
  background: linear-gradient(92.83deg, rgb(255, 116, 38) 0%, rgb(249, 58, 19) 100%) !important;
}

.layout-button.btn-primary:hover:not(:disabled):after,
.lsvt-interactive-button.btn-primary:hover:not(:disabled):after,
.layout-button.btn-secondary:hover:not(:disabled):after,
.lsvt-interactive-button.btn-secondary:hover:not(:disabled):after {
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  transition-timing-function: ease-in !important;
  opacity: 0 !important;
}

.layout-button.btn-primary:active:not(:disabled),
.lsvt-interactive-button.btn-primary:active:not(:disabled),
.layout-button.btn-secondary:active:not(:disabled),
.lsvt-interactive-button.btn-secondary:active:not(:disabled) {
  color: #ccc !important;
  border-radius: 80px !important;
}

.layout-button.btn-primary:active:not(:disabled):before,
.lsvt-interactive-button.btn-primary:active:not(:disabled):before,
.layout-button.btn-secondary:active:not(:disabled):before,
.lsvt-interactive-button.btn-secondary:active:not(:disabled):before {
  background-image: linear-gradient(0deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), linear-gradient(92.83deg, #ff7426 0, #f93a13 100%) !important;
}

.layout-button.btn-primary:active:not(:disabled):after,
.lsvt-interactive-button.btn-primary:active:not(:disabled):after,
.layout-button.btn-secondary:active:not(:disabled):after,
.lsvt-interactive-button.btn-secondary:active:not(:disabled):after {
  background-image: linear-gradient(#541a0f 0, #0c0d0d 100%) !important;
  bottom: 4px !important;
  left: 4px !important;
  right: 4px !important;
  top: 4px !important;
}

.layout-button.btn-primary:disabled,
.lsvt-interactive-button.btn-primary:disabled,
.layout-button.btn-secondary:disabled,
.lsvt-interactive-button.btn-secondary:disabled {
  cursor: default !important;
  opacity: .24 !important;
}

As you can see, we've used Custom CSS to add flair and elegance to every button and interaction element. This example demonstrates the power of customization and how you can make your Interactive Videos truly stand out. Remember, each style you apply is tagged with !important to ensure your changes shine through.

With this example as your guide, you're now equipped to create your own visually captivating Interactive Video experiences that leave a lasting impression on your audience. Happy styling! 🎥🎨