Archived topic
Border-bottom in button
3 replies · Started by Sanu Kumar on June 4, 2021
Hey
Could you show me how to add like this video: https://www.loom.com/share/639b10104d3e491db27d09b76ae08669
Reference Site: https://www.hostgator.com/press
There's a border-bottom in the button but when I click, border-bottom disappears. How to make like that? In fact, how to add this effect in the Blocks button.
Hi Sanu,
That one you're seeing is a box-shadow rather than a border bottom.
You can do that with either custom CSS or:
if you have one, by GenerateBlock Pro's effects option as shown here - https://share.getcloudapp.com/X6uAYPjG
The disappearing effect is done through different box-shadow settings for different element states. (ex :focus, :active, :hover etc)
could you help me with CSS, other wise it could be a tough job to manually.
I am using ugb button ( using other plugin) but for future post, I will be using Block button
CSS should be easier for me. It will automatically do everything.
It's something like this:
.example-btn-class {
box-shadow: 0 3px 0 #815627, 0 6px 4px -2px rgb(0 0 0 / 30%);
font-size: 24px;
padding: 8px 32px;
border-radius: 6px;
}
.example-btn-class:active {
box-shadow: none;
}