Solved

Change button outline or remove button outline Taste theme

Thute
Visitor
1 0 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

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

Accepted Solution (1)

techlyser_web
Shopify Partner
1639 301 322

This is an accepted solution.

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;
}

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

View solution in original post

Replies 2 (2)

zaczee
Globetrotter
848 46 42

Hi,

 

Can you share your store url

techlyser_web
Shopify Partner
1639 301 322

This is an accepted solution.

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;
}

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com