• Home
  • Blog
  • Showcase
  • Setup Docs
    • Sunshine Help
    • Flex Help
  • Support
    • Support Area
    • Contact us
    • Feedback
  • Connect
    • Newsletter
    • Twitter
    • Facebook
  • My Account
  • Flex
  • Sunshine
Support : Simple Pro Themes

Support : Simple Pro Themes

[Resolved] Button CSS

If you have purchased a product, please enter the email address that you used to register at time of purchase.
Log In
Lost Password

Create an Account
  • Your username must be unique, and cannot be changed later.
  • We use your email address to email you a secure password and verify your account.

Support › Forums › Flex Theme › Button CSS

Tagged: button styling

  • This topic has 3 replies, 3 voices, and was last updated 4 years, 11 months ago by Davinder Singh Kanith.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • February 25, 2016 at 11:41 am #929
    jessie
    Participant

    Please could you point me to the correct CSS areas:

    1. Change buttons border and text colours. I changed everything I could find in CSS under buttons. Text colour is now correct, but border colour unchanged, remains grey.

    2. Button Hover – would like text/arrow to remain in white, but change background colour.

    3. Wish to add button with above styling to the after entry widget. I added a button in the AE text widget, but not picking up the theme styling.

    Thank you

    February 25, 2016 at 12:25 pm #930
    Chinmoy Paul
    Moderator

    Share the site URL.

    February 25, 2016 at 6:51 pm #931
    jessie
    Participant

    Sorry, but the site is still in development on my computer. Do you want me to copy/paste the CSS I have here?

    February 27, 2016 at 5:34 am #933
    Davinder Singh Kanith
    Moderator

    You need to make changes in the following code found in style.css file (besides the button class)

    .comment-reply-link,
    .read-more a,
    .flex-caption a.read-more,
    .home-middle .featuredpost a.more-link,
    .home-middle .featuredpage .page a.more-link {
        border: 1px solid #444;
        color: #444;
        display: inline-block;
        padding: 10px 18px;
        position: relative;
        letter-spacing: 0.5px;
        text-transform: uppercase;  
        -webkit-transition: all 0.2s ease 0s;
           -moz-transition: all 0.2s ease 0s;
            -ms-transition: all 0.2s ease 0s;
             -o-transition: all 0.2s ease 0s;
                transition: all 0.2s ease 0s;
    }
    
    .button:after,
    .comment-reply-link:after,
    .read-more a:after,
    .flex-caption a.read-more:after,
    .home-middle .featuredpost a.more-link:after,
    .home-middle .featuredpage .page a.more-link:after {
        color: #fff;
        content: "\f345";
        font-family: dashicons;
        font-size: 26px;
        margin-left: -20px;
        opacity: 0;
        position: absolute;
        right: 5px;
        top: 4px;
    }
    
    .button:hover,
    .comment-reply-link:hover,
    .read-more a:hover,
    .flex-caption a.read-more:hover,
    .home-middle .featuredpost a.more-link:hover,
    .home-middle .featuredpage .page a.more-link:hover,
    .cta a.button:hover,
    .sidebar .textwidget a.button:hover {
        background-color: #22a1c4;
        border-color: #22a1c4;
        color: #fff;
        padding: 10px 35px 10px 18px;
    }
    
    .button:hover:after,
    .comment-reply-link:hover:after,
    .read-more a:hover:after,
    .flex-caption a.read-more:hover:after,
    .home-middle .featuredpost a.more-link:hover:after,
    .home-middle .featuredpage .page a.more-link:hover:after {
        margin-left: -20px;
        opacity: 1;
    }
    
    .flex-caption a.read-more { 
        border: 1px solid #fff;
        color: #fff; 
    }
    
  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.
Log In

Copyright © 2021 · Simple PRO Themes for Genesis Framework · About · FAQs · Contact · Affiliates