Tagged: , , ,

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • December 3, 2018 at 2:34 pm #1040303
    transformmedia

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

    December 4, 2018 at 5:11 am #1040556
    Rikard

    Hey transformmedia,

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

    Best regards,
    Rikard

    December 4, 2018 at 5:59 pm #1040823
    transformmedia

    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

    December 5, 2018 at 10:00 am #1041124
    Rikard

    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

    December 10, 2018 at 6:57 pm #1043262
    transformmedia

    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

    December 11, 2018 at 8:02 am #1043597
    Rikard

    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

    December 11, 2018 at 9:18 am #1043631
    transformmedia

    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

    December 11, 2018 at 10:20 am #1043678
    Rikard

    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

    December 11, 2018 at 1:27 pm #1043739
    transformmedia

    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 ;)

    December 11, 2018 at 1:34 pm #1043745
    transformmedia

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

    December 12, 2018 at 6:57 am #1044142
    Rikard

    Hi,

    Ok, so what exactly do you want to change?

    Best regards,
    Rikard

    January 4, 2019 at 12:28 pm #1049958
    transformmedia

    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?

    January 7, 2019 at 7:22 pm #1051015
    Vinay

    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

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.