Archived topic
Dev Homepage & buttons
5 replies · Started by Jacob on September 22, 2020
Hey guys, I tried to find it in older post, but had no luck (or did it wrong.)
For the new 'dev' theme, how do I make the homepage similar to your sample? I'm mostly referring to the alternating white and gray background blocks, hope that makes sense.
The purple buttons, i Noticed on the sample, when you hover over it, the button 'jumps' up a little via javascript, how do I implement this?
Thank you.
Hi there,
I'm mostly referring to the alternating white and gray background blocks, hope that makes sense.
That is using full-width container blocks from GenerateBlocks:
https://wordpress.org/plugins/generateblocks/
https://docs.generateblocks.com/article/container-overview/
The button is actually just using this CSS:
/* gp buttons and button class assigned to the generateblocks buttons */
.button {
border-radius: 4px;
box-shadow: 0 12px 20px -10px rgba(0, 0, 0, 0.3);
-webkit-transition: all 500ms ease-in-out !important;
transition: all 500ms ease-in-out !important;
}
.button:hover {
box-shadow: 0 30px 20px -20px rgba(0, 0, 0, 0.3);
-webkit-transform: translate3d(0, -4px, 0);
transform: translate3d(0, -4px, 0);
}Great thanks, I just can't remember how to make the button square?
I also targeted a different css class, i suspect its the same.
.wp-block-button {
border-radius: 4px;
box-shadow: 0 12px 20px -10px rgba(0, 0, 0, 0.3);
-webkit-transition: all 500ms ease-in-out !important;
transition: all 500ms ease-in-out !important;
}
.wp-block-button:hover {
box-shadow: 0 30px 20px -20px rgba(0, 0, 0, 0.3);
-webkit-transform: translate3d(0, -4px, 0);
transform: translate3d(0, -4px, 0);
}
Looks like you are using the code button block so have you tried changing the setting?
https://www.screencast.com/t/tC9Q4dEq
Perfect thanks.
No problem :)
