Archived topic
Button Styling in Theme
5 replies · Started by GeneratePressUser on July 5, 2022
Hello,
Pls can you visit once the website provided in private box
You can see how on hovering on those buttons it has effect, can you pls tell if we can add that same on any of our generatepress buttons? If yes can u tell if it needs some additional plugin or simple css can do it? and do you know from where to get such types more button styles?
Hello there,
The Shadow/Outline effect can be achieved with GenerateBlocks Pro. For the sliding shiny effect, you would need custom CSS.
For instance, if you add my-button-effect to the class list of the GB Button, you can add this CSS in Appearance > Customize > Additional CSS for the slding shiny effect:
.gb-button.my-button-effect:after {
background-color: rgba(255,255,255,0.9);
content: "";
height: 155px;
left: -75px;
opacity: .2;
position: absolute;
top: -50px;
transform: rotate(35deg);
transition: all .55s cubic-bezier(.19,1,.22,1);
width: 50px;
z-index: 3;
}
.gb-button.my-button-effect {
position: relative;
}
.gb-button.my-button-effect:hover:after {
left: 130%;
transition: all .55s cubic-bezier(.19,1,.22,1)
}Hope this helps!
Got it, so if we need to put that on certain buttons like add to cart button on our store or in general if all buttons then we need to just use the code accordingly, do you know a website which has such tons of css effects? like the one I showed was shiny, so some website which has such tons of button or random effects with css?
Yes, you would just need to add the class my-button-effect. You may need to adjust the height and the width in the code depending on the size of the button though.
Try https://codepen.io/ for CSS codes.
Hope this helps!
Hey Fernando,
Thanks :)
You’re welcome! :)
