Add button in Custom HTML widget

[MattieM]

Hi,

I want to add a button in a custom HTML widget.
I looked at the shortcodes at: http://demo.theme.co/integrity-1/shortcodes/buttons/

But i want to give the button custom colours.

Hope you can help

[basanta]

Hi @MattieM,

Thanks for writing in!

You can do this in custom CSS.
please add one custom class name to the button short-code.
The code should look like this.

[button type="real" class="custom-color" shape="rounded" size="large" href="#example" block="true" title="Example"]Block Buttons Take Up The Entire Width Of Their Container[/button]

Then add this CSS to your theme option -> CSS

.custom-color{
background: #ccc;
color: #000;
}

You can use any color code you want.

Hope this helps!

[MattieM]

Hi,

Thanks for the reply.
The colour is working now but it seem the Font is getting underlined and some shadow from somewere.

Also how can i allign the button next to the image? Now its full width.
For reference see: https://www.cryptotradingacademie.nl/koersen/eos-koers-verwachting/

[jade]

Hi MattieM,

Please try to group the image and the buttons in a div inside the HTML widget of your site like this:

<div class="group">
    <div class="col"><!-- The image code here --> </div>
    <div class="col"><!-- The image button shortcode here --> </div>
</div>

then add this code in the global CSS:

.group {
    display: block;
}

.group .col {
    float: left;
    width: 50%;
}

Hope this helps.

[MattieM]

Thanks for the reply.
I tried it and its partly fixed. The allignment is good but now they widgets overlap:

Also the Font is not correct (underlined and shadow), in the settings i have different font for links.

[jade]

Hi there,

Please add this code in the Global CSS:

#custom_html-16,
#custom_html-16 .custom-html-widget {
    float: left;
}

Hope this helps.