How can I correctly position and link two buttons on my landing page?

Flawless23
Visitor
3 0 0

I need some help please as have tried to research extensively myself and stuck!

I have manged to use create the below code for my landing page. I have 2 buttons which I need in the centre but one on the right and one on the left which link to 2 seperate pages on my site.

 

The buttons are on top of eachother and when I try to link them, they turn blue as well.

 

My code is:

 

<style>
video{max-width: 100%;}
.section-custom-video{position:relative;}

@media screen and (min-width: 750px){
.text_on_video{position: absolute;
top: 50%; right: 40%; left: 60%; bottom:50%
padding: 10px;}
}
</style>

<div class="section-custom-video">
<video autoplay="" muted="" loop="" playsinline="" class="custom-video">
<source src="https://cdn.shopify.com/videos/c/o/v/9ce689dd1f3948a4b52847dc78a4543c.mp4">
</source></video>

<div
class="text_on_video">
<FONT COLOR=white>
<font size="+3">
<u>

BOOK&nbspAPPOINTMENT
</div>

@media screen and (min-width: 750px){
.text_on_video{position: absolute;
top: 50%; right: 40%; left: 60%; bottom:50%
padding: 10px;}

</style>


<div
class="text_on_video">
<FONT COLOR=white>
<font size="+3">
<u>


TRAINING&nbspCOURSES
</div>

Replies 4 (4)

Zeel-prajapatii
Shopify Partner
138 32 27

@Flawless23 can you please share the website URL?

 

Thanks

➔ Was I helpful , please don't forget to like and mark solution as an accepted solution , you can PM me.
➔ Software engineer : Having more than 3 years of experience in the related industry with the specialization of Shopify theme development , worked on hundreds of stores.
➔ Want to hire me? Email me
Flawless23
Visitor
3 0 0

Hi of course its flawlessme.uk

 

thankyou

Ritu-25
Shopify Partner
129 26 15

Hello @Flawless23 , 

Please use this code it might help you. 

 

<style>
    video{max-width: 100%;}
    .section-custom-video{position:relative;}
    .section-custom-video {
        position: relative;
        display: flex;
        justify-content: space-between;
    }
    .section-custom-video .text_on_video a {
        color: #fff;
    }        
</style>

<div class="section-custom-video">
    <div class="text_on_video">
        <font color="white">
            <font size="+3">
                <a href="#">BOOK&nbsp;APPOINTMENT</a>
            </font>
        </font>
    </div>
    <div class="text_on_video">
        <font color="white">
            <font size="+3">
                <a href="#">TRAINING&nbsp;COURSES</a>
            </font>
        </font>
    </div>
</div>

 

You can add the link where i have added # in href. 

 

Thanks, 

Ritu 

If helpful then please Like and Accept Solution.
You can directly PM.
Email Me : nayakritu.2506@gmail.com
Flawless23
Visitor
3 0 0

Hi thank you - i tried this but there were no buttons once I entered this code. All the text disappeared.