Tagged: gradient
-
AuthorPosts
-
March 27, 2019 at 7:35 pm #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.
April 1, 2019 at 12:08 am #1085213Hey 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.
.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 :)
.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,
MikeApril 11, 2019 at 6:14 pm #1089657HI Mike, this is brilliant. Thanks!
April 11, 2019 at 10:48 pm #1089749Hi,
I’m glad this was resolved. If you need additional help please let us know here in the forums.
Best regards,
Jordan Shannon -
AuthorPosts
- The topic ‘Gradient on button’ is closed to new replies.