How can I edit the "Read More" design for a summary block for a blog using carousel layout?

I would like to make it look more like a button spreading across the entire page with a little more pop. I'm using a custom template. Thanks!

@keep7925 Please share site url!

www.integralchristiannetwork.org@tuanphan

@keep7925 Add to Home > Design > Custom CSS

a.summary-read-more-link {
   background: #000;
   color: #fff;
   max-width: 120px;
   margin: 0 auto !important;
   padding: 10px;
}

@keep7925 Add to Home > Design > Custom CSS

a.summary-read-more-link {
   background: #000;
   color: #fff;
   max-width: 120px;
   margin: 0 auto !important;
   padding: 10px;
}

Thanks! Any way to adjust the font, size of text, and arrow?

@keep7925

Use

font-size: 15px;font-family: futura-pt;

"arrow" you mean you want to change to custom icon?

thank you again. Yes there is an arrow: "-->" after the phrase "read more." How would I modify that?

@tuanphan one more question if you're willing to help. In the same section summary feature it gives me the option for the text layout alignment, but it only applies to the whole text. I want the title and author to remain centered, but the text below to be left aligned. Any way to do this? Thanks.

@keep7925 you need to hide current "read more" and replace with new "read more".

/* Hide Read More */
a.summary-read-more-link {
  visibility: hidden;
}
/* Insert New Read More */
a.summary-read-more-link:after {
   visibility: visible;
   content: "Read More -->";
   background: #000;
   padding: 15px;
}

@keep7925

.summary-excerpt p {
   text-align: left !important;
}