Tips for customizing the appearance of the "Read More" button on an Elementor card

I'm new to the world of wordpress and I'm struggling to customize the CSS for a button on a card. My goal is to center the "Read more" button on the post card and give it a border, but I'm not having any luck in Elementor. I tried tweaking the custom code specifically for the button element, but it ended up changing the entire card layout and centering both the text and description.

Here's what my current result looks like:

Current Result

Here's how I want it to look:

Desired Result

I attempted to write custom CSS code, but since I'm a novice in CSS, it ended up affecting the title, description, and button. Here's the code I used:


a.elementor-post__read-more {
    width: 100%;
    color: #000;
    text-align: center;
    background-color: #ffd9d9;
    border-radius: 6px;
    margin-top: auto;
}

Answer №1

Avoid using the a tag when selecting elements; instead, focus on using the class name .elementor-post__read-more.

.elementor-post__read-more { 
 width: 100%; 
 color: #000; 
 text-align: center;
 background-color: #ffd9d9; 
 border-radius: 6px; 
 margin-top: auto; 
}

To ensure that the style only affects title, description, and button elements, search for all occurrences of elementor-post__read-more as a class throughout the page to identify any potential impacts on other elements.

Answer №2

Check out this awesome CSS code!

.custom-read-more-link {

display: flex;
justify-content: center;
align-items: center;
text-align: center;
width: 100%;
margin-top: 15px;
padding: 10px 20px;
border: 1px solid #000;
border-radius: 6px;
color: #000;
background-color: #ffd9d9;
text-decoration: none;
transition: all 0.3s ease;

}

.custom-read-more-link:hover {

background-color: #ffcaca;

}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to remove the default outline in the <img> tag?

<img class="image_cover" src = "" /> .image_cover { width:25px; height:25px; border-style:none; border: 0; box-shadow:none; } Showing an example in a live demo on jsfiddle Encountering an issue in Chrome Version 33.0.1750.152, ...

Cross Browser Compatibility for CSS Page Scrolling to the Right and Handling White Space/Margins

Currently in the process of developing a WordPress Theme at . Struggling with achieving equal left and right margins around the center container, resulting in the page displaying white space and allowing unnecessary scrolling. Seeking advice from anyone wh ...

Personalizing the predefined title bar outline of the input text field

The outline color of the title in the input textbox appears differently in Google Chrome, and the bottom border line looks different as well. <input type="text" title="Please fill out this field."> https://i.stack.imgur.com/iJwPp.png To address th ...

The background color disappears when viewed on mobile devices

I have created a table using HTML and CSS. The issue is that the background colors of the table display correctly on a desktop, but on a mobile phone, they appear completely transparent while the text remains visible. I am using Bootstrap 4 for this websi ...

Designing Interactive Circular Dates on Website

Currently, I am working on a webpage using HTML, CSS, JavaScript, and PHP. The goal is to design a page that features 7 circles representing the current date and the next 6 days. Users should be able to click an arrow to navigate to the following 7 days. ...

Showcasing WordPress blog articles on an external website

I have integrated WordPress functions into an external webpage to fetch posts and pages, which are working perfectly. However, when I use the_content(); to showcase the post content, the formatting seems off. The HTML displays correctly but the line bre ...

Fade in images using jQuery

I am having issues with fading in and out images using jQuery, it doesn't seem to be working as expected. I think there might be something crucial that I am missing. Take a look at the script below: var count = 1; setInterval(function() { ...

Modifying CSS styles in JavaScript based on the user's browser restrictions

My CSS style looks like this: button.gradient { background: -moz-linear-gradient(top, #00ff00 0%, #009900 50%, #00dd00); background: -webkit-gradient(linear, left top, left bottom, from(#00ff00), color-stop(0.50, #009900), to(#00dd00) ...

CSS :empty selector failing to target elements

I have a situation where I utilized the :empty selector within the .error class. However, I'm encountering an issue where even if there is no content inside the div with the error class, the error class does not get removed entirely. Upon examination ...

Allocating the remaining container space to a lone flex item

Imagine a scenario where I have a flex container with children that completely fill the container. .container { display: flex; width: 150px; } .item { flex: 1 1 50px; border: 1px solid blue; } <div class="container"> <div class="item ...

What causes the div to not adjust to the browser window when the vertical size is decreased?

Imagine a basic HTML page like this: <doctype> <html> <head> <title>My Amazing Page</title> <script type="text/javascript" src="jquery-1.8.3.min.js"></script> </head&g ...

Fix the uneven shape border/outline

I made 3 circles using CSS (:after) and noticed that the border looks uneven with certain background colors. Any suggestions on how to resolve this issue? You can view the problem here: Just below the post title, you'll find the first blue circle bo ...

Using Stylus and Nib CSS in a secure Node/Express application is causing Chrome to flag insecure JavaScript warnings

System notifications: The website at [...] encountered insecure content from http://fonts.googleapis.com/css?family=Quicksand. as well as The site at [...] showed insecure content from http://themes.googleusercontent.com/static/fonts/quicksand/v2/sKd0EM ...

visibility:hidden causing issue with hiding empty option in IE dropdown

I am currently working on an Angular 11 application. On one of the pages, there are 2 radio buttons and a dropdown. The desired behavior is that whenever the radio button selection is changed, the dropdown value should be reset to empty. The code provided ...

Minimize the expansive width of Shiny Dashboard's sidebar for

I'm facing a challenge in hiding a shinydashboard sidebar with a wider width. Upon increasing the width, however, the sidebar isn't completely disappearing from the screen. Here's an example that illustrates the issue I'm trying to add ...

Position the two input boxes next to each other

I need help re-arranging my input boxes on a web page. Currently, they are stacked on top of each other vertically and I would like them to be displayed horizontally with two boxes per row. Here is an example of how I'd like them to look: https://i.ss ...

Enhance your Wordpress posts with a custom pop-up form for each individual button

On a page, there are various custom posts being displayed with the post type 'property', each containing a button: <button class="btn btn-primary">Submit Offer</button> This button is looped and shown below every post. What ...

"Struggling with the 2-Column Layout Glitch

I attempted to follow a tutorial for creating a 2 column layout from this person: Here is the result of my implementation: / http://jsfiddle.net/WrpA8/ The CSS: #container { width: 800px; margin: 40px auto; border: 1px solid black; } #header ...

Error encountered when using Symfony 2 command line interface

Just started learning Symfony2 and encountered a problem. I made changes to my CSS and when I try to re-install them in Eclipse shell, I get this error message: 'C:\wamp\www\Symfony' is not recognized as an internal or external ...

The functionality of z-index is not applying when using position fixed

I have the following CSS code: #one{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 999; } #two{ position: relative; z-index: 9; width: 200px; height: 200px; background: red; } #link { position: ...