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

[Hemant]

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…

[David]

Hi there,

this article explains:

https://docs.generatepress.com/article/adding-buttons/

[Hemant]

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?

[Hemant]

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/

[David]

Change this CSS:

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

to:

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

[Hemant]

You are a genius.. that worked.. 🙂

[David]

You’re welcome

[Author]

Posts