How to style the "Read More" link in a posts carousel

Beaver Builder
1

I have a posts carousel in a row on a home page. I want to set the “More” link apart from the paragraph before it. I want to give it a little padding above and make it look more noticeable and clickable. Maybe even make it look like a button.

Can someone tell me how to do that? The dev site is http://cleanshaveweb.com/pediaspeech3/

2

Hey steve729,

Welcome to BB forums! :slight_smile: Try the CSS snippet below and see if it’s what you’re looking for. Insert into Appearance > Customize > Code > CSS Code. I’ve attached a screenshot for your reference. Let us know how it goes! :slight_smile:

http://imgur.com/RxbXuoJ

/* Button Styling */
.fl-module-post-carousel .fl-post-carousel-more {
    padding:10px;
    border:1px solid red;
    background: rgba(245,55,55,1);
    border-radius:6px;
}

/* Accent Color */
.fl-module-post-carousel a.fl-post-carousel-more {
    color:#fff;
}

/* Hover Effect */
.fl-module-post-carousel .fl-post-carousel-more:hover {
    opacity:0.5;
}

/* Apply space between content and button */
body .fl-post-carousel-grid .fl-post-carousel-content p:last-of-type {
    margin-bottom: 10px;
}

Thanks!

KC

3

Thanks KC. That worked perfectly!

I’m using CSS Hero. It’s still pretty new to me and I couldn’t seem to pinpoint the exact elements to style without applying the style to similar elements in CSS Hero. – fl-post-carousel-more and .fl-post-carousel-content p:last-of-type. So I just added your code directly to the BB child theme’s style.css file for now.

Beaver Builder is great and CSS Hero is great! – And together, wow!

4

Hi Steve,

Happy to hear your issue has been resolved and thank you for the kind words.

All the best,
Danny