Cornerstone - button outline

[meld78]

Hi there,

I'm using the theme cornerstone and on the homepage, there is a promotional grid. No matter what I do, the buttons won't get an outline.

I have tried this code which is half-way working but the button is too big (height) and I would prefer the wording "shop bestseller" in one line.

Is someone able to assist?

Store URL www.31031b-75.myshopify.com

PW: aubiep

Thank you.

.promotion-grid-item__promotion-text {
display: inline-block; /* Makes the link behave like a button */
background-color: #CEB5D6 !important; /* Button background color */
color: #ffffff !important; /* Text color */
padding: 10px 20px !important; /* Padding to create a button effect */

outline: 1px solid #ffffff !important; /* Thinner white outline */
border-radius: 20px !important; /* Rounded corners */
text-align: center; /* Centers the text */
text-decoration: none !important; /* Removes underline */
box-shadow: none !important; /* Removes any shadow */
}

[Made4uo-Ribe]

Hi @meld78 

Reduce the padding left n right and add this code.

p.promotion-grid-item__promotion-text.ff-body {
    white-space: nowrap;
    padding: 10px 5px;
}

And save. 

Result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!