Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #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;

    }

    #241418

    and 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;
    }

    #242426

    Hi!

    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,
    Devin

    #242779
    This reply has been marked as private.
    #242785

    Hi!

    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,
    Yigit

    #242790
    This reply has been marked as private.
    #242796

    Hi!

    Please add following code to Quick CSS as well

    .avia_ajax_form .button { border-radius: 15px; }

    Regards,
    Yigit

    #243311

    Thanks Yigit,
    worked like a charm!

Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Buttons with gradient and rounded corners..’ is closed to new replies.