Hi @sooskriszta 🙂
It looks like the CSS isn’t quite right.
Can you send me to a page showing me what you want each button to look like (as example of each button styling) and I’d be happy to help you determine the correct CSS.
Thanks
Thread Starter
SK
(@sooskriszta)
https://sooskrisztina.hu – slider on top of page.
Buttons should look like on this page: https://my.studiopress.com/themes/corporate/#demo-full
Except, different color (orange) as on: https://sooskrisztina.hu/kapcsolat/
-
This reply was modified 7 years, 4 months ago by
SK.
Hi 🙂
Thank you! So you’re CSS needs to be changed to this:
a.button.white.outline {
border-radius: 9em;
color: #ffffff;
cursor: pointer;
font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
font-weight: 700;
font-size: 1.6rem;
display: inline-block;
width: auto;
line-height: 3em;
height: 3em;
padding: 0 3.333333em;
box-shadow: 0 0.25rem 2rem -0.5rem rgba(255, 255, 255, 0);
background: #d93;
background: -moz-linear-gradient(-45deg,#d93 0,#d33 100%);
background: -webkit-linear-gradient(-45deg,#d93 0,#d33 100%);
background: linear-gradient(135deg,#d93 0,#d33 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d93',endColorstr='#d33',GradientType=1);
}
Then the 1 button would look like this:
https://cl.ly/143e9957a67d
As for the 2nd button, it’s not picking up any styling as it doesn’t have the same CSS class names.
Thread Starter
SK
(@sooskriszta)
Where should I put the CSS? The theme already has this CSS…that’s how it shows up okay on the contact page…
Thread Starter
SK
(@sooskriszta)
To theme’s custom CSS, I added:
.button.white.outline, button.white.outline, .wp-block-button a.white.outline {
color: #ffffff;
background: transparent;
box-shadow: inset 0 0 0 2px #ffffff;
}
.soliloquy-caption-inside .button, .soliloquy-caption-inside button, .soliloquy-caption-inside .wp-block-button a {
border: 0;
border-radius: 9rem;
color: #ffffff;
cursor: pointer;
font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
font-weight: 700;
font-size: 16px;
font-size: 1.6rem;
text-decoration: none;
white-space: nowrap;
display: inline-block;
width: auto;
line-height: 3em;
height: 3em;
padding: 0 3.333333em;
box-shadow: 0 0.25rem 2rem -0.5rem rgba(255, 255, 255, 0);
background: #d93;
background: -moz-linear-gradient(-45deg,#d93 0,#d33 100%);
background: -webkit-linear-gradient(-45deg,#d93 0,#d33 100%);
background: linear-gradient(135deg,#d93 0,#d33 100%);
}
And is it showing as expected for you? The only place I would’ve suggested is the Appearance >> Customize >> Additional CSS
Thread Starter
SK
(@sooskriszta)
Yes, thanks, I added to Appearance >> Customize >> Additional CSS
