Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #1040303

    I want to add a 3D look to the buttons. Is there any code I can paste into the quick css section? :)

    #1040556

    Hey transformmedia,

    Could you link to an example of what you are trying to achieve please?

    Best regards,
    Rikard

    #1040823

    Hey Rikard,

    just a modest 3d effect, not something crazy. Maybe something like this:

    https://designmodo.com/wp-content/uploads/2012/12/3D-Button-in-CSS31.jpg

    Cheers,
    Tobi

    #1041124

    Hi Tobi,

    Thanks for that, could you post a link to where we can inspect the actual element as well please? Otherwise it will take a lot of time to recreate the CSS which is applying to it.

    Best regards,
    Rikard

    #1043262

    Hi Rikard,

    here on this page the buttons have a little shadow and look more 3d, that would be cool:

    https://brendon.com/

    Thank you for your help!

    Tobi

    #1043597

    Hi,

    Thanks for that, you could try to add a class to the buttons you want this to apply to. For instance my-button-class. Then add this to Quick CSS:

    .my-button-class {
        background-image: linear-gradient(#e5ebe9,#e5ebe9);
        border-radius: 3px;
        border: 1px solid;
        border-top-color: #f6fbfb;
        border-bottom-color: #939e9d;
        border-right-color: #939e9d;
        border-left-color: #f6fbfb;
    }

    Best regards,
    Rikard

    #1043631

    Hi Rikard,

    I tried it out, but there is no change in the appearance of my buttons, also when I change the colour codes.

    Best regards,
    Tobi

    #1043678

    Hi,

    Thanks for the update, which class did you use? I can’t find the my-button-class on your front page for instance.

    Best regards,
    Rikard

    #1043739

    Hey,

    I deleted it, but tried it now again with my-button-class. And now there is a grey area around the button which doesn’t look very 3d ;)

    #1043745

    It’s working a little better with button with full width, but also doesn’t look that 3d-ish…

    #1044142

    Hi,

    Ok, so what exactly do you want to change?

    Best regards,
    Rikard

    #1049958

    Maybe this example is better: https://liveoffyourpassion.com/joinus/
    (the short “come join us” one)

    So it’s just an added border below the button in a different colour. Is that possible?

    #1051015

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    CSS Snippet:

    
    /* CSS - */
    
    #top #header .av-menu-button a {
    	top: -6px !important;
    	transition: all 40ms linear !important;
    	position: relative;
    }
    
    #top #header .av-menu-button a:active {
    	margin-top: 2px !important;
    }
    
    
    #top #header .av-menu-button a .avia-menu-text{
    	box-shadow:  0 0 0 1px gold inset,
    	0 0 0 2px rgba(255, 255, 255, 0.15) inset, 
    	0 8px 0 0 gold, /* 3d bottom border */
    	0 8px 8px 1px rgba(0, 0, 0, 0.25); /* shadow */
    }
    
    #top #header .av-menu-button a:active .avia-menu-text {
    	box-shadow:  0 0 0 1px gold inset,
    	0 0 0 1px rgba(255, 255, 255, 0.15) inset, 
    	0 1px 3px 1px rgba(0, 0, 0, 0.35);
    }
    
    
    

    Please play around with the CSS values and change the gold color in the code to suit your design.

    Best regards,
    Vinay

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.