Why Styling?
Styling a button or text on a web page is crucial for creating an engaging and visually appealing user experience. When it comes to styling buttons and text, there are many options available, and the best approach can vary based on personal taste, the website’s brand identity, and the overall design of the web page. CSS provides a range of properties that can be used to customize the appearance of buttons and text.
What do we provide?
In order to cater to different design preferences for buttons, we have included a “Custom CSS styling code” field under the “Advanced customization” section. This allows users to input their own CSS code to apply any design they desire, providing great flexibility and customization options. This is a highly beneficial feature as it provides the ability to create unique and personalized designs. Let’s explore the various options that are available.
Button style
- Assign Button background color (Check this out to explore the colors):
background-color:#23b83c - Assign Button width (you can put percentage format or pixel number like 350px) :
width: 100% - Assign Border to button ( Check this out to explore the border attribute) :
border: dashed 4px #020353 - Assign Box Shadow to button (Check this out to explore more examples):
box-shadow: 3px 3px 8px 0 red - Assign Border radius to button (Check this out to explore more examples):
border-radius: 30px
Text Style
- Change text color (Check this out to explore the colors):
color: red - Assign font family to text (Check this out to explore the options) :
font-family: fantasy - Assign font size (Check this out to explore the options ):
font-size: smaller - Assign font stretch (Check this out to explore the options):
font-stretch: expanded - Assign font style (Check this out to explore the options):
font-weight: normal - Assign font weight (Check this out to explore the options):
font-style: italic - Assign Text decoration((Check this out to explore the options):
text-decoration: green wavy under
There is a wide range of features that you can have on your button. And the shared link are including many examples that you can check and see which one fits your store.
Practical Examples
Alright, Let’s do some examples!:)
Styling Button
.prdrly_btn {
- color: blue;
- background-color: #fbf323;
- border: solid black;
- box-shadow: 3px 3px 8px 0 black;
- border-radius: 8px;
- width: 350px;
- font-family: fantasy;
- font-size: medium;
- font-style: oblique;
- font-weight: lighter;
- font-stretch: expanded;
}
Styling Text
.preorder-button_description.preorder-asset {
- color: red;
- font-family: arial;
- font-size: medium;
- font-style: oblique;
- font-weight: lighter;
- font-stretch: expanded;
}
Our CSS styling code
Now, Let’s Show you How to use the above code to “Custom CSS styling code” in your settings.
Hope it’s helpful for you. please contact us if there is any question!
