How to change the style of the "Read More" button in the elementor card

I am a beginner in wordpress, and I am having a problem creating custom CSS code to edit a button on a card. I would like to align the "Read more" button in the center of the post card and add borders to it, but in elementor, I'm not getting it. I tried editing custom code just for the <a> attribute where the button is, however, it changes the whole card and centers both the text and the description.

Currently my result is as in the image below.

Currently

I would like to leave it like this:

I need like this

I tried to create a custom code, but I am a CSS beginner, and it is changing all the title, description and the button, here is my code:

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

The a is unneccessary in finding the element, you should just use the class, .elementor-post__read-more.

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

If it still applies to all title, description and button elements search for all instances of elementor-post__read-more as a class insode the page to see if see other elements will be affected

You can try this CSS!!

.elementor-post__read-more {

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;

}

.elementor-post__read-more:hover {

background-color: #ffcaca;

}