The html below is from the slider rendered by a WordPress Plug-in. I need to make "Read More" button non-transparent. Could you please help do it? I tried to increase the opacity for the same but it didn't help.

<!-- ROW 0 -->
<div class="front-page-row bg-tan-light" id="row0">
<div class="wrap-x">
<div class="inside mini">
<article class="body-area mt2x">
<div class="wpsisac-slick-slider-wrp wpsisac-clearfix " data-conf="{&quot;dots&quot;:&quot;true&quot;,&quot;arrows&quot;:&quot;false&quot;,&quot;autoplay&quot;:&quot;true&quot;,&quot;autoplay_interval&quot;:&quot;50000&quot;,&quot;fade&quot;:&quot;false&quot;,&quot;lazyload&quot;:&quot;&quot;,&quot;speed&quot;:&quot;200&quot;,&quot;rtl&quot;:&quot;false&quot;,&quot;loop&quot;:&quot;true&quot;,&quot;hover_pause&quot;:&quot;true&quot;}">
<div id="wpsisac-slick-slider-1" class="wpsisac-slick-init wpsisac-slick-slider design-3 wpsisac-image-fit">
<div class="wpsisac-image-slide">
<div class="wpsisac-slide-wrap" style='height:400px;'>  
<img  src="http://pwp-wordpress/wp-content/uploads/2021/09/Holiday_Catalogue.jpg" alt="Holiday Catalog" />
<div class="wpsisac-slider-content">
<div class="wpsisac-bg-overlay wp-medium-6 wpcolumns">
<h2 class="wpsisac-slide-title">Holiday Catalog</h2>
<div class="wpsisac-slider-short-content"><p>View our 2021 Holiday Gift Brochure</p>
</div>
<div class="wpsisac-readmore"><a href="https://packedwithpurpose.gifts/how-to-order/gift-catalogue/" class="wpsisac-slider-readmore">Read More</a></div>
</div>
</div>
</div>
</div><div class="wpsisac-image-slide">
<div class="wpsisac-slide-wrap" style='height:400px;'>  
<img  src="http://pwp-wordpress/wp-content/uploads/2020/07/full-width-image1.jpg" alt="Test Slide 3" />
<div class="wpsisac-slider-content">
<div class="wpsisac-bg-overlay wp-medium-6 wpcolumns">
<h2 class="wpsisac-slide-title">Test Slide 3</h2>
<div class="wpsisac-slider-short-content"><p><strong>Rainforest preservation, clean water access, landfill waste reduction and sustainable agricultural practices.</strong></p>
</div>
<div class="wpsisac-readmore"><a href="https://www.wponlinesupport.com" class="wpsisac-slider-readmore">Read More</a></div>
</div>
</div>
</div>
</div>          </div>
</div>
</article>
</div>
</div>
</div><!-- ROW 0 -->

CodePudding user response：

Don't use the element's opacity. Have you tried using the background opacity instead?

background: rgba(255,255,255,0.3)