Button CSS custom

Support
#1

Hi there,
I’d like to replicate this button CSS on this site

I used a shortcode within a Ubermenu, with a new button class. Button must be close to upper image, wide like image, thin border black (1px) and text black on white background. What are right CSS config?

Thanks in advance

Roberto

#2

Hi Roberto,

Thank you for reaching out to us. If you’ve given a class to your button then you can add the following code in the Theme Options > CSS:

.your-button-class {
    background: #fff;
    border: 1px solid #444;
    padding: 5px 10px;
    color: #444;
    border-radius: 0;
}

A better approach would be to use the Cornerstone’s button element instead and style it using the button settings. Hope this helps!

#3

Hi there! I used your code and all is quite ok!
It seems perfect but i 'd like the button wide like image above!

This is the actual situation

Any idea?

#4

Hey Roberto,

Try replacing the previous code with the following one:

.your-button-class {
    background: #fff;
    border: 1px solid #444;
    padding: 5px 10px;
    color: #444;
    border-radius: 0;
    display: block;
    width: 100%;
}

If it doesn’t work then please provide the URL of the page in question so we can take a closer and provide you a tailored solution. In the mean time I’m sharing some related links for further reading, this could help you in finding and implementing some CSS fixes:

Cheers!

#5

Hi there,
I ve modified a bit your code like that

.your-button-class {
    text-shadow: none !important;
    font-size: 10px;
    background: #f9f9f9;
    border: 1px solid #444;
    padding: 8px 8px 8px 8px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    color: #444;
    border-radius: 0;
    width: 80%;
    vertical-align: 1px;
}

but still I’ve to reduce the gap in image below

Can’t find the right selector, can you help me?
Website is: reptileshouse.it

Thanks in advance!

#6

Hi @mcvanz,

Please check your Ubermenu settings. Reduce or remove the 15px bottom padding and the class aligncenter on the image . See this: https://screencast-o-matic.com/watch/cqjj6TOLZq

Hope this helps.

#7

Hi Lely
Please can you gently write me down the code? I’m a CSS rookie :sweat_smile:

#8

Hi @mcvanz,

You can add this to your UberMenu CSS or Theme Options > CSS

.ubermenu .ubermenu-custom-content-padded {
	padding-bottom: 0;
}
.ubermenu .ubermenu-custom-content-padded img {
	margin-bottom: 0;
}

Hope it helps,
Cheers!

#9

You’re a Wizard! It works!
Thanks a lot!

#10

You’re always welcome!

Cheers.

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.