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.
-
AuthorPosts
-
February 25, 2016 at 11:41 am #929
jessie
ParticipantPlease 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 #930Chinmoy Paul
ModeratorShare the site URL.
February 25, 2016 at 6:51 pm #931jessie
ParticipantSorry, 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 #933Davinder Singh Kanith
ModeratorYou 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; }
-
AuthorPosts
- You must be logged in to reply to this topic.