How can I add borders to web buttons for a transparent effect?

Store Design
1

Hello guys, I need to add the border to the buttons so that I can make it transparent inside and only shown the border like this? I know there are solutions posted but it didn’t work for me. Could anyone please help me with this? Appreciate it!

For instance:

RowabiCo_1-1649017803116.png
RowabiCo_1-1649017803116.png339×218 6.68 KB

Our website is: https://www.rowabi.com or https://wabi-element.myshopify.com/

1 Like
2

Hi @RowabiCo ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.min.css->paste below code at the bottom of the file:
.account-section--btn, .advanced-layout--hero__text-block .btn, .advanced-layout--hero__text-block .btn--secondary, .advanced-layout--hero__text-block .shop-now-wrapper--mobile .shop-now-button--secondary, .ajaxcart__footer .cart__checkout, .btn--full, .btn--load-more, .footer-email-submit, .homepage-featured-box-btn, .homepage-section-btn, .onboarding--sold-out a.btn, .quick-add-button, .quick-add-button-onboarding, .quick-add-button-variants, .shop-now-button, .shop-now-button-onboarding, .shop-now-wrapper--mobile .advanced-layout--hero__text-block .shop-now-button--secondary, .shopify-challenge__button, .show-view-all--button .btn, .sold-out-button, .spr-button {
    background: transparent !important;
    color: #000 !important;
    border: 1px solid #000 !important;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

3

@RowabiCo

can you please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.min.css->paste below code at the bottom of the file:
.account-section--btn, .advanced-layout--hero__text-block .btn, .advanced-layout--hero__text-block .btn--secondary, .advanced-layout--hero__text-block .shop-now-wrapper--mobile .shop-now-button--secondary, .ajaxcart__footer .cart__checkout, .btn--full, .btn--load-more, .footer-email-submit, .homepage-featured-box-btn, .homepage-section-btn, .onboarding--sold-out a.btn, .quick-add-button, .quick-add-button-onboarding, .quick-add-button-variants, .shop-now-button, .shop-now-button-onboarding, .shop-now-wrapper--mobile .advanced-layout--hero__text-block .shop-now-button--secondary, .shopify-challenge__button, .show-view-all--button .btn, .sold-out-button, .spr-button {
    color: #000 !important;
    border: 1px solid !important;
    background: transparent !important;
}
4

Wow amazing, thank you so much @KetanKumar @AvadaCommerce ! It works like magic!