• 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

Reply To: 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 › Reply To: Button CSS

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

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