Html Question posted in
Some basic documentation can be found here.

How to Add a Video as a button Background in HTML and CSS?

I tried using background-image in css for the button background, but that only works for images and doesn’t work for videos. So, are there any way to put a video as the background of the button? I’m trying to make a button with a looped muted video as the background.

Tags:

2

Answers


  1. 0

    One way to do it is by using HTML5 element and absolute positioning within a container that acts as your button. Replace "your-video-file.mp4" with the path to your video file.

      .button-container {
    position: relative;
    display: inline-block;
    overflow: hidden;
  }
  
  .video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* This prevents the video from capturing clicks */
  }

  .button {
    position: relative;
    z-index: 1;
    display: inline-block;
    padding: 10px 20px;
    background-color: rgba(255, 255, 255, 0.5);
    border: none;
    border-radius: 5px;
    color: #333;
    font-size: 16px;
    cursor: pointer;
    outline: none;
  }
    <div class="button-container">
  <video class="video-background" autoplay muted loop>
    <source src="your-video-file.mp4" type="video/mp4">
    <!-- Add more source tags for different video formats if needed -->
    Your browser does not support the video tag.
  </video>
  <button class="button">Your Button Text</button>
</div>
    Login or Signup to reply.
  2. 0 
    

    

        function showAlert() {
        alert('Button clicked!');
    }
    

        .button-container {
            position: relative;
            display: inline-block;
        }
        
        .video-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        
        .video-background video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .transparent-button {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: transparent;
            border: none;
            cursor: pointer;
        }
        
        .button-text {
            position: relative;
            z-index: 1;
            color: #fff;
            font-size: 18px;
            text-align: center;
            padding: 10px 20px;
        }
    

        <div class="button-container">
        <div class="video-background">
            <video autoplay loop muted>
                <source src="sample.mp4" type="video/mp4">
            </video>
        </div>
        <button class="transparent-button" onclick="showAlert()">
            <div class="button-text">Video Button</div>
        </button>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search