Full width widget button and with Icon?

Hi Atefan,

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

You can use the private information field.

Let me know :)

sure!
Thank you

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 :)

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

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

Thank YOU,
worked well!

Glad to hear that :)

You are welcome!

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

Hi there,

try:

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

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

Perfect David, thank you!

Glad we could be of help