Change button outline or remove button outline Taste theme

Store Design
, ,
1

Hi, I wanted to go from a square to circular button shape, so I used this code

.button, .customer button, .shopify-challenge__button {border-radius: 100px;}

and put it on base.css, but this was the result

Screenshot 2023-12-17 222030.png
Screenshot 2023-12-17 222030.png351Ă—134 53.1 KB

how do i get rid of the border outline or make the

2

Hi,

Can you share your store url

3

Hello @Thute

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.
  2. Open your base.css file
  3. Paste the below code at bottom

a.button.button–primary {
border-radius:25px;

}

.button::before{

content: “”;

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

z-index: -1;

border-radius: var(–buttons-radius-outset);

box-shadow: unset !important;

}

.button::after{
content: “”;
position: absolute;
top: var(–buttons-border-width);
right: var(–buttons-border-width);
bottom: var(–buttons-border-width);
left: var(–buttons-border-width);
z-index: 1;
border-radius: var(–buttons-radius);
box-shadow: unset !important;
transition: box-shadow var(–duration-short) ease;
}