Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1083774

    Hi guys,

    Can’t get the gradient to apply, have used the CSS in a load of other topics but i cant seem to apply it to my button:

    Tried this:

    .avia-button {
    background: #7db9e8;
    background: -moz-linear-gradient(top, #7db9e8 0%, #2989d8 50%, #1e5799 100%);
    background: -webkit-linear-gradient(top, #7db9e8 0%,#2989d8 50%,#1e5799 100%);
    background: linear-gradient(to bottom, #7db9e8 0%,#2989d8 50%,#1e5799 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#7db9e8′, endColorstr=’#1e5799′,GradientType=0 );
    }

    And this:

    .top-home-cta a.avia-button {
    background: #7db9e8;
    background: -moz-linear-gradient(top, #7db9e8 0%, #2989d8 50%, #1e5799 100%);
    background: -webkit-linear-gradient(top, #7db9e8 0%,#2989d8 50%,#1e5799 100%);
    background: linear-gradient(to bottom, #7db9e8 0%,#2989d8 50%,#1e5799 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#7db9e8′, endColorstr=’#1e5799′,GradientType=0 );
    }

    and this:

    #top .main_color .top-home-ctaa.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%;}
    }

    My css selector is “.top-home-cta” but I can’t seem to find out how to apply the styles to the buttons.

    #stumped!

    Thanks guys.

    #1085213

    Hey realisedesign,
    Sorry for the late reply, Thanks for the link to your site, it helps. I was able to get this working for you, please adjust colors to suit.
    2019-03-31-175550

    .top-home-cta a.avia-button{
    background: #7db9e8 !important; 
    border-color: #1e5799 !important; 
    background: -moz-linear-gradient(top, #7db9e8 0%, #2989d8 50%, #1e5799 100%) !important; 
    background: -webkit-linear-gradient(top, #7db9e8 0%,#2989d8 50%,#1e5799 100%) !important; 
    background: linear-gradient(to bottom, #7db9e8 0%,#2989d8 50%,#1e5799 100%) !important; 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7db9e8', endColorstr='#1e5799',GradientType=0 ) !important; 
    }

    I remember working on this one not too long ago, I liked the animation :)
    2019-03-31-180320

    .top-home-cta a.avia-button {
    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%;}
    }

    Best regards,
    Mike

    #1089657

    HI Mike, this is brilliant. Thanks!

    #1089749

    Hi,

    I’m glad this was resolved. If you need additional help please let us know here in the forums.

    Best regards,
    Jordan Shannon

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

The topic ‘Gradient on button’ is closed to new replies.