Craft Theme: How to Make Buttons Outlined?

Store Design
, ,
1

Hello All,

I would love help adding the outline button function to the Image with Text section in my shopify store.

Any help is appreciated. Thank you.

2

Hi @roseanna92

This is Kate from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/base.css->paste below code at the bottom of the file:

.button {
  background-color: white;
  border: 2px solid black;
  padding: 10px 20px;
}

You can adjust the padding property to increase or decrease the space between the border and the button text. You can also adjust the border property to change the width, style, and color of the border.

Hope my answer will help you

3

hi @roseanna92

I’m Kate from PageFly - Landing Page Builder, I’d like to suggest this idea:

Step 1: You go to Online store → Theme → action → Edit code

Step 2: You find file Base.css and add code:

.button,
.shopify-challenge__button,
.customer button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 0;
  padding: 0 3rem;
  cursor: pointer;
  font: inherit;
  font-size: 1.5rem;
  text-decoration: none;
  color: rgb(var(--color-button-text));
  transition: box-shadow var(--duration-short) ease;
  -webkit-appearance: none;
  appearance: none;
  background-color: rgba(var(--color-button), var(--alpha-button-background));
}
4

Hello, thank you for your suggestions! The first suggestion made a black outline on all the buttons in the store and I am just looking to add the outline button function in the Image with Text section. The second suggestion did not add anything. Let me know if you have any other suggestions to try. Thank you again!

5

Hi @roseanna92 ,

To add the outline button function in the Image with Text section. I’d like to suggest this idea:

Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/base.css->paste below code at the bottom of the file:

.image-with-text__content .image-with-text__text+.button {
  background-color: white;
  border: 2px solid black;
  padding: 10px 20px;
}

If you need further assistance, please don’t hesitate to ask.

6

Thank you so much, that worked perfect! :slightly_smiling_face:

1 Like