[Resolved] Dev Homepage & buttons

Home Forums Support [Resolved] Dev Homepage & buttons

Home Forums Support Dev Homepage & buttons

  • This topic has 5 replies, 2 voices, and was last updated 1 year ago by Leo.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1454170
    Jacob

    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.

    #1454202
    Leo
    Staff
    Customer Support

    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);
    }
    #1454233
    Jacob

    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);
    }
    
    #1454238
    Leo
    Staff
    Customer Support

    Looks like you are using the code button block so have you tried changing the setting?
    https://www.screencast.com/t/tC9Q4dEq

    #1454272
    Jacob

    Perfect thanks.

    #1454280
    Leo
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.