[Resolved] Full width widget button and with Icon?

[Atefan]

0Hello, me again.

I have a working button in my widget.
But is it possible to enlarge it to the full width (or nearly) of the widget and get an SVG icon from the generatepress library in it, on the same level as the text?

good day

[Ying]

Hi Atefan,

Any chance you can link us to the site in question?

You can use the private information field.

Let me know 🙂

[Atefan]

sure!
Thank you

[Ying]

You could try to replace the current button HTML to this:

<a class="button" href="your-cutom-link">
<span class="icon"><svg aria-hidden="true" role="img" height="1em" width="1em" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm0 48v40.805c-22.422 18.259-58.168 46.651-134.587 106.49-16.841 13.247-50.201 45.072-73.413 44.701-23.208.375-56.579-31.459-73.413-44.701C106.18 199.465 70.425 171.067 48 152.805V112h416zM48 400V214.398c22.914 18.251 55.409 43.862 104.938 82.646 21.857 17.205 60.134 55.186 103.062 54.955 42.717.231 80.509-37.199 103.053-54.947 49.528-38.783 82.032-64.401 104.947-82.653V400H48z"></path></svg></span>
<span class="button-text">Email</span>
</a>

Then add this CSS:

aside#custom_html-2 a.button {
    display: flex;
    justify-content: center;
    font-size: 20px;
}

Let me know 🙂

[Atefan]

yeah looks much better!
but the icon has not the same height and both icon and text a bit bigger would be perfect!

[Ying]

Try add this as well:

aside#custom_html-2 a.button .icon {
    align-items: center;
    display: flex;
    margin-right: 10px;
}

And I edited the second CSS here:
https://generatepress.com/forums/topic/full-width-widget-button-and-with-icon/#post-1729089

[Atefan]

Thank YOU,
worked well!

[Ying]

Glad to hear that 🙂

You are welcome!

[Atefan]

Dear Ying,
I would like to change this button from green to orange.
how could i do that?

[David]

Hi there,

try:

aside#custom_html-2 a.button {
    background-color: orange;
}

You can replace orange with the #hex color you require.

[Atefan]

Perfect David, thank you!

[David]

Glad we could be of help

[Author]

Posts