Viewing 30 posts - 1 through 30 (of 42 total)
  • Author
    Posts
  • #1082030

    Is it possible to apply a color gradient to all H1 texts? and to a especific button?

    Thanks!

    #1082076

    Hey Nerohm,
    Yes, to add gradient to all H1 texts please see these examples: 1 2 3
    Here’s a great example for buttons and here

    Best regards,
    Mike

    #1082104

    Thanks Mike!

    That was very useful, I already applied on my site.

    #1082121

    Hi,
    Glad to hear, I assume we can close this now, but I like to ask first. Shall we close this then?

    Best regards,
    Mike

    #1082180

    Hi Mike,

    I am not too familiar with this setup …

    If I want to apply this button to my website …

    What should I do …

    Step by step guide would be very helpful. (Where would I enter the HTML and what labels should I use)

    Kind regards,

    #1082200

    Hi,
    First you will want to ensure that your custom classes enabled in the theme options at: Enfold Theme Options > Layout Builder > Show element options for developers:
    2019-03-23-180232
    Then we will add this style to a X-large enfold button, so add your button to the page in the Advanced Layout Builder:
    2019-03-23-180517
    Then add the custom class to the button:

    btn

    2019-03-23-190948
    Then we will add the button css to the Enfold Theme Options > General Styling > Quick CSS field

    #top .main_color .btn a.avia-button.avia-color-theme-color {
         color: rgba(255,255,255,0.9) !important; 
         border-radius: 50px !important; 
         background: linear-gradient(-45deg, #FFA63D, #FF3D77, #338AFF, #3CF0C5) !important;
         border-color: transparent !important; 
         background-size: 600% !important; 
         animation: anime 16s linear infinite; 
    }
    
     @keyframes anime {
       0% {
         background-position: 0% 50%;}
       50% {
         background-position: 100% 50%;}
       100% {
         background-position: 0% 50%;}
    }
    

    Results:
    2019-03-23-190706

    Best regards,
    Mike

    #1082384

    Perfect … That work like a charm …

    Thank you for your help.

    Just for future reference … How should I copy other CSS stylings from the websites you provided?

    e.g. other button styles, background styles etc. etc.

    Your help will be appreciated.

    #1082403

    Thank you for your explanation.

    How can I apply the same animation to background colour e.g. to a colour section. Is it possible?

    If yes how would I implement that?

    Kind regards,
    http://www.projectt.co.uk

    #1082405

    Hi,
    Glad to help, as for copying other styles and using them, I wouldn’t say that you can copy css you find and add it to your elements very easily, you would need a little knowledge of css. I would say that if you see this done a few times you will get a sense of how to do it. If you find something else you want to do please let us know and we will assist again.

    Best regards,
    Mike

    #1126826

    Hi Mike, I tried to accomplish to get that same button style and followed the layed out steps. However, the buttons with the .btn class now totally disappear or appear white or transparent. Is there anything I can do to get this working?

    See link. They should appear in the lower section above the Opt in on the left and right.

    • This reply was modified 1 year, 1 month ago by  AwiIlanKali.
    #1127084

    Hi,
    @awiilankali thank you for the link, I took a look at your buttons and adjusted the css for your buttons that were using some different classes and it seems to work now. Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    #top .main_color .btn a.avia-button.avia-color-custom {
         color: rgba(255,255,255,0.9) !important; 
         border-radius: 50px !important; 
         background: linear-gradient(-45deg, #FFA63D, #FF3D77, #338AFF, #3CF0C5) !important;
         border-color: transparent !important; 
         background-size: 600% !important; 
         animation: anime 16s linear infinite; 
    }
    
     @keyframes anime {
       0% {
         background-position: 0% 50%;}
       50% {
         background-position: 100% 50%;}
       100% {
         background-position: 0% 50%;}
    }

    Here is the result:
    via GIPHY

    Best regards,
    Mike

    #1127142

    phantastic Mike. Thank you so much. Works great now in Chrome and Safari!!!
    Anything I can add to make it work in FIrefox as well? Not sure about otherPC browsers.

    #1127462

    Hi,
    Glad to hear, I’m on a PC and it works with Chrome & Edge, for Firefox please try using this css instead:

    #top .main_color .btn a.avia-button.avia-color-custom {
         color: rgba(255,255,255,0.9) !important; 
         border-radius: 50px !important; 
         background: linear-gradient(-45deg, #FFA63D, #FF3D77, #338AFF, #3CF0C5) !important;
         border-color: transparent !important; 
         background-size: 600% !important; 
         animation: anime 16s linear infinite; 
         -moz-animation: anime 16s linear infinite;
    }
    
     @keyframes anime {
       0% {
         background-position: 0% 50%;}
       50% {
         background-position: 100% 50%;}
       100% {
         background-position: 0% 50%;}
    }
     @-moz-keyframes anime {
       0% {
         background-position: 0% 50%;}
       50% {
         background-position: 100% 50%;}
       100% {
         background-position: 0% 50%;}
    }

    Best regards,
    Mike

    #1127942

    thank you for checking Mike and the new code. I adjusted it to my gradient here. But Firefox still doesn’t display the gradient animation.
    Any ideas?

    #top .main_color .btn2 a.avia-button.avia-color-custom {
    color: rgba(255,255,255,0.9) !important;
    border-radius: 30px !important;
    background: linear-gradient(-45deg, #0077f2, #202b8e, #ff481e, #ff5e1e) !important;
    border-color: transparent !important;
    background-size: 600% !important;
    animation: anime 8s linear infinite;
    -moz-animation: anime 8s linear infinite;

    }

    @keyframes anime {
    0% {
    background-position: 0% 50%;}
    50% {
    background-position: 100% 50%;}
    100% {
    background-position: 0% 50%;}
    }
    @-moz-keyframes anime {
    0% {
    background-position: 0% 50%;}
    50% {
    background-position: 100% 50%;}
    100% {
    background-position: 0% 50%;}
    }

    #1128420

    Hi,
    Sorry for the late reply, I did not figure out why this is not working, I’m sure the css is correct with the proper “-moz-” prefixes, so I tried changing it to jQuery and now it works in Chrome and Firefox.
    To test this, please add a code block element to your page and place this code inside:

    <script>
    (function($){
    $(document).ready(function () {
        $('.btn2 a.avia-button').css({
         'color': 'rgba(255,255,255,0.9)', 
         'border-radius': '50px', 
         'background': 'linear-gradient(-45deg, #FFA63D, #FF3D77, #338AFF, #3CF0C5)',
         'border-color': 'transparent', 
         'background-size': '600%', 
         'animation': 'anime 16s linear infinite' 
    })
    
    });
    })(jQuery);
    </script>
    <style>
     @keyframes anime {
       0% {
         background-position: 0% 50%;}
       50% {
         background-position: 100% 50%;}
       100% {
         background-position: 0% 50%;}
    }
    </style>

    We could make this code global, but first, test it on one page to see if it’s also working for you.

    If you would like to test this on a new page, please Enable Avia Layout Builder Debugger which will add a new text field below the Advanced Layout Builder, and then add the page shortcode in the link below, then save the page.
    https://www.dropbox.com/s/641pwwo7eukd5ts/gradient_button_shortcode.txt?dl=0

    Best regards,
    Mike

    #1128475

    HI Mike,
    thank you so much for your work.
    I added your code to the Quick CSS Panel.
    However in Firefox the buttons with btn2 are now transparent and not visible.
    Everything still works in Chrome. But now not in Safari.

    I am going to switch it back to the other code, as I need to present my client the page. And without the skript it at least shows the button in the theme color. I you feel like figuring it out I am grateful. However I can live with it not working in firefox for now. Since every other browser seems to display it right.

    Thank you.
    Awi

    #1128482

    Hi,
    The jQuery code I posted last will not work in the Quick CSS field, that area is only for css.
    If you include an admin login I can demonstrate on a test page, or even on the one page you are working on.
    Or you can download the test page shortcode that I wrote about.
    But if you are fine with it as it is that ok too :)

    Best regards,
    Mike

    #1150867

    Hi there!

    I’m using a css code to create text color gradient, but the problem is that the second color (100%) is not visible. When the text is longer, the color is visible. Looks like it’s using the whole column as 100% in stead of only the text. When I make the screen smaller, the second color (pink) is visible because the column is getting smaller. Hope you understand me.

    This is my css code:

    h2.kop-gradient {
    background: -webkit-linear-gradient(left, #8e0075, #fa006b);
    background: -o-linear-gradient(right, #8e0075, #fa006b);
    background: -moz-linear-gradient(right, #8e0075, #fa006b);
    background: linear-gradient(to right, #8e0075, #fa006b);
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    }

    See link in private data. The pink color should be more visible, just like the logo.

    Thanks a lot!

    #1151016

    Hi,
    Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    h2.kop-gradient {
    	display: table !important; 
    }

    Best regards,
    Mike

    #1155540

    Hi Mike,

    Thanks but now the title is totally gone. Any other ideas?

    #1155542

    Oh, that’s weird. When I select the text, the color is appearing. The color is great now. Any idea why the text is first transparant? And the centered title is not centered anymore. See link! Thanks!

    Is it because of this code:

    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;

    • This reply was modified 10 months, 2 weeks ago by  jannnnnneke.
    #1155559

    Hi,
    Sorry I’m not experiencing transparent text, but I’m on Windows and I assume you are on IOS, if so then try removing those two lines of code they are for IOS and was recommended as necessary, but perhaps I misunderstood.
    I see that your H2 is not centering because we had to set the display to “table” for the gradient to work, to center we need to add:

    h2.kop-gradient {
        margin: auto !important; 
    }

    Best regards,
    Mike

    #1155564

    Hi! In Google Chrome the text was visible, in Safari not.

    I’ve added the margin auto, but now all the titles are centered.

    And when I remove the two lines of background clip and text fill color, the background is gradient, not the text. See site!

    Thanks!

    #1155606

    Hi,
    I see so you will need those two lines of code. I thought you wanted all h2.kop-gradient centered?
    If not then add another class, such as center to the h2.kop-gradient elements, be sure you leave a space between the classes like kop-gradient center then use this css instead:

    h2.kop-gradient.center {
        margin: auto !important; 
    }

    As for the Safari issue I will have to investigate more.

    Best regards,
    Mike

    #1155610

    Yes, perfect! That’s working. Thanks!

    About the safari issue: when I load the page, the text is not visible/transparent.. when I select the text, it is visible and stays visible. So when I select all the text on the page and than deselect, than all the titles are visible.

    #1155999

    Hi,
    Glad that is working, as for Safari I found the display: table; may be causing the issue with the -webkit-background-clip: text; (more about background-clip) This may be a solution, please note that on that page it is pointed out that this is a Safari bug, Please try changing display: table; to display: inline; and see if that helps, after clearing your browser cache.

    Best regards,
    Mike

    #1156023

    Yes display inline is working! Only the centered text is not centered anymore. This is the css code im using:

    h2.kop-gradient {
    background: -webkit-linear-gradient(left, #8e0075, #fa006b);
    background: -o-linear-gradient(right, #8e0075, #fa006b);
    background: -moz-linear-gradient(right, #8e0075, #fa006b);
    background: linear-gradient(to right, #8e0075, #fa006b); 
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    display: inline !important;
    }
    
    h2.kop-gradient.center {
    margin: auto !important; 
    }

    Thanks!!

    #1156175

    Hi jannnnnneke,

    Well, to center the text the container have to have more width and with the inline element, it will not work. You can try the left margin, but it might not be ideal:

    
    h2.kop-gradient {
        margin-left: 30%;
    }
    
    

    Best regards,
    Victoria

    #1156467

    Hi,

    Margin left 30% is ideal… and not perfect working on mobile. Maybe there is another element in stead of the inline element? Any ideas? Or a total other way of creating gradient text color? Or another way of removing the transparent text in Safari? Maybe set display inline only for Safari? But I dont know if that will solve the problem..

    Thanks a lot!

    #1156476

    Hi,
    Try removing the margin rule, and see if this works with Safari for centering and the gradient:

    h2.kop-gradient.center, h1.kop-gradient.center {
        display: flex !important; 
        justify-content: center !important; 
    }

    Best regards,
    Mike

Viewing 30 posts - 1 through 30 (of 42 total)

The topic ‘Gradients (buttons and text)’ is closed to new replies.