-
AuthorPosts
-
March 21, 2014 at 10:29 pm #241398
Hi there
so I have the code below in my quick css and it’s changed the buttons beautifully with the exception of the submit buttons, specifically the form buttons and woocommerce buttons, can you give me the beginning code for that? Thanks :)
body div .avia-button
{
border:1px solid #7eb9d0; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-size:12px;font-family:arial, helvetica, sans-serif; padding: 10px 10px 10px 10px; text-decoration:none; display:inline-block;text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; color: #FFFFFF;
background-color: #a7cfdf; background-image: -webkit-gradient(linear, left top, left bottom, from(#a7cfdf), to(#23538a));
background-image: -webkit-linear-gradient(top, #a7cfdf, #23538a);
background-image: -moz-linear-gradient(top, #a7cfdf, #23538a);
background-image: -ms-linear-gradient(top, #a7cfdf, #23538a);
background-image: -o-linear-gradient(top, #a7cfdf, #23538a);
background-image: linear-gradient(to bottom, #a7cfdf, #23538a);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#a7cfdf, endColorstr=#23538a);
border-radius: 15px;}
March 21, 2014 at 11:25 pm #241418and if I use this, it does everything except round the corners:
a.button, button.button, input.button, #review_form #submit { border:1px solid #7eb9d0; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-size:12px;font-family:arial, helvetica, sans-serif; padding: 10px 10px 10px 10px; text-decoration:none; display:inline-block;text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; color: #FFFFFF;
background-color: #a7cfdf; background-image: -webkit-gradient(linear, left top, left bottom, from(#a7cfdf), to(#23538a));
background-image: -webkit-linear-gradient(top, #a7cfdf, #23538a);
background-image: -moz-linear-gradient(top, #a7cfdf, #23538a);
background-image: -ms-linear-gradient(top, #a7cfdf, #23538a);
background-image: -o-linear-gradient(top, #a7cfdf, #23538a);
background-image: linear-gradient(to bottom, #a7cfdf, #23538a);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#a7cfdf, endColorstr=#23538a);
border-radius: 15px;
}March 25, 2014 at 1:10 am #242426Hi!
Can we see your site with the current css in place? That way we can see what is preventing the broder-radius declaration to not work.
Best regards,
DevinMarch 25, 2014 at 4:06 pm #242779This reply has been marked as private.March 25, 2014 at 4:13 pm #242785Hi!
Please flush browser cache and refresh your page a few times. Button corners are rounded on my end. Please see screenshot here – http://i.imgur.com/JcVwMOf.jpg
Best regards,
YigitMarch 25, 2014 at 4:17 pm #242790This reply has been marked as private.March 25, 2014 at 4:20 pm #242796Hi!
Please add following code to Quick CSS as well
.avia_ajax_form .button { border-radius: 15px; }
Regards,
YigitMarch 26, 2014 at 1:13 pm #243311Thanks Yigit,
worked like a charm! -
AuthorPosts
- The topic ‘Buttons with gradient and rounded corners..’ is closed to new replies.