Site logo

Archived topic

How do I add full width button with centered text and inherits Theme color

6 replies · Started by Hemant on July 27, 2020

Viewing posts 1–7 of 7

Is there a way I can add full width button that inherits theme color but with bold and large text?

I wish to add a button that says continue with a hyperlink to other page.

The page in question is: https://pressbuzzer.com/celebrities-who-died-too-soon/3

There already exists a continue button but I would like to achieve it through themes color... I want the text size to be large and centered...

Thanks David, So I have this CSS:

.button.sun-flower,
.button.sun-flower:visited {
	background: #F1C40F;
	color:#FFF;
}

.button.large {
	font-size: 35px;
}

a.button.wide {
    width: 100%;
}

And this is the HTML Code:

<a class="button sun-flower large wide" href="URL FOR YOUR BUTTON">Your button text</a>

It works well.. but how to I center the text?

I managed to get it work via this..

<center><a class="button sun-flower large wide" href="URL FOR YOUR BUTTON">Your button text</a></center>

but the button is slightly tilted towards right... how do i make it center... check it on mobile..

link: https://pressbuzzer.com/test/

Change this CSS:

a.button.wide {
    width: 100%;
}

to:

a.button.wide {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}

You are a genius.. that worked.. :)

You're welcome

This archived topic is closed to new replies.