Adding a Shop Now Button and Text Over my Autoplay Looped Video

[RoguePup]

Hi, 

I am not very familiar with html coding but found some liquid code that I used to make a video on my homepage. The video autoplays on a loop. I would like to have a Shop Now button along with some text placed in the center of the video. I would appreciate any help! Thank you! My site page is https://roguepup.com/

This was the code I used to create my Custom Liquid video: 

<style>
video {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
</style>
<video muted autoplay playsinline loop>
<source src="https://cdn.shopify.com/videos/c/o/v/2f3d5b8f0828486fac4c59f00842531b.mov"
type="video/mp4">
<source src="https://cdn.shopify.com/videos/c/o/v/2f3d5b8f0828486fac4c59f00842531b.mov"
type="video/mp4">
</video>

[attaboiaj · Accepted solution]

Here this will works for you 

```

<style>
video {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
position: relative;
}

.button-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}

.shop-now-button {
padding: 12px 24px;
font-size: 18px;
font-weight: bold;
color: white;
background-color: #4CAF50;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}

.shop-now-button:hover {
background-color: #45a049;
}
</style>

<div style="position: relative;">
<video muted autoplay playsinline loop>
<source src="https://cdn.shopify.com/videos/c/o/v/2f3d5b8f0828486fac4c59f00842531b.mov"
type="video/mp4">
<source src="https://cdn.shopify.com/videos/c/o/v/2f3d5b8f0828486fac4c59f00842531b.mov"
type="video/mp4">
</video>
<div class="button-container">
<button class="shop-now-button">Shop Now</button>
</div>
</div>

```

[RoguePup]

Forgive the simple image but here is what I would like.

[attaboiaj · Accepted solution]

Here this will works for you 

```

<style>
video {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
position: relative;
}

.button-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}

.shop-now-button {
padding: 12px 24px;
font-size: 18px;
font-weight: bold;
color: white;
background-color: #4CAF50;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}

.shop-now-button:hover {
background-color: #45a049;
}
</style>

<div style="position: relative;">
<video muted autoplay playsinline loop>
<source src="https://cdn.shopify.com/videos/c/o/v/2f3d5b8f0828486fac4c59f00842531b.mov"
type="video/mp4">
<source src="https://cdn.shopify.com/videos/c/o/v/2f3d5b8f0828486fac4c59f00842531b.mov"
type="video/mp4">
</video>
<div class="button-container">
<button class="shop-now-button">Shop Now</button>
</div>
</div>

```

[RoguePup]

Hi, 

Thank you for your time. The button worked but I am wondering where in the code I would put the link for the button? Also, if possible is there way to add some basic text under the shop now button? 

[attaboiaj · Accepted solution]

Yes it's possible 

Copy paste the my code on ChatGPT and ask
Please add this "link" to the shop now button
Please add some "basic text" under shop now button

[RoguePup]

Thank you!