Скачать или смотреть How To Create Custom Button Styles In Shopify | Easy CSS

Your Shopify buttons don’t have to be boring. Follow along to easily create custom buttons for your Shopify site using CSS. If you don’t know what CSS is, no worries, this is an easy tutorial for beginners.

What is RGBA? Sorry I didn’t explain it in the video. RGBA stands for Red, Green, Blue, and Alpha. It's a color model used in digital design and coding. Each color (red, green, and blue) is represented by a value ranging from 0 to 255. The alpha value represents the opacity of the color, ranging from 0 (fully transparent) to 1 (fully opaque). It’s best to use RGBA when you want to add transparency to a color.

Below is the CSS you can copy and paste. Please ensure that you follow the video to see how the code is formatted. Sometimes we lose formatting when we paste the code here in the description.

Button styling:
.button {
color: HEX-COLOR !important; / Change the text color /
font-size: 18px; /* Change the font size */
border: 1px solid HEX-COLOR !important; / Add a border /
background-color: HEX-COLOR; / Change background color /
border-radius: 10px; / *Add rounded corners */
}

Drop Shadow button:
.button {
box-shadow: 5px HEX-COLOR !important;
}

Box Shadow button:
.button {
box-shadow: 0px 0px 10px 0.8px HEX-COLOR !important;
}

Shadow button:
.button {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

Hover effect 1:
.button:hover {
background-color: HEX-COLOR !important;
color: HEX-COLOR!important;
}

Hover effect 2:
.button:hover {
box-shadow: 0 12px 16px 0 rgba(229, 235, 14, 0.5),0 17px 50px 0 rgba(0, 0, 0 ,0.19);
}

If you would like to add a gradient to your buttons then check out this video 👉🏽 How to Add Gradient to Your Shopify Buttons (Step-By-Step)    • How to Add Gradient to Your Shopify Button...  

Timestamps ⌚️
00:00 How to style your Shopify buttons
01:20 Change button text color
02:50 Change button background color
03:20 Add a box shadow
05:45 Add a button hover effect
07:20 Add a shadow hover effect
08:00 Resources to create more button styling
11:00 How to add button style to the entire Shopify site


📑 Get access to my Shopify Pre-Launch Checklist list at https://betsylugo.com/shopify-checklist/

🔔 Thanks for watching and be sure to subscribe for more awesomeness!


⚞⚞⚞⚞⚞☕️ ABOUT ☕️⚟⚟⚟⚟⚟

Learn how to design & customize your Shopify website. Subscribe to be notified when a new video is released. I pledge to keep the tutorials simple, short, and helpful!

I’m a self-taught web designer, super-nerd, and a Shopify partner. Owner of Betsy Lugo Creative ☕ I drink an insane amounts of coffee, so if you want to say thanks for a helpful video, buy a coffee! https://www.buymeacoffee.com/bl.creative 📺 I watch way to much Netflix ✈️ I love to travel.


👉🏽LET'S CONNECT
Say hi on Insta   / betsy_oficial  
Follow me on Pinterest   / bl_creative  
Work with me https://www.betsylugo.com
Join Commerce Connection - A monthly newsletter sharing Shopify news and updates, ecommerce trends, freebies and more! https://betsylugo.com/monthly-newslet...

👉🏽 TOOLS & SYSTEMS I LOVE
Several clients have requested that I posted my affiliate links so that they can register through them as a thank-you for my free tutorial content here on YouTube. Thank you so much for your support! If you would like to use my affiliate links, I would greatly appreciate 🙏🏾

My social media management system https://my.mtr.cool/QQKZQD
Protect your business https://bit.ly/BLC-Policies
Custom Shopify sections https://bit.ly/BLC-Sections
Product mockups https://bit.ly/BLC-Mockups
My favorite themes https://bit.ly/BLC-Themes
Want more? Check out my resources page https://betsylugo.com/resources/


The term "Shopify" is a trademark of Shopify Inc. and the term "Canva" is a trademark of Canva Inc. This video was not approved or endorsed by them. I just really love their platforms ♥

DISCLAIMER: Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. There is no additional charge to you! Thank you for supporting my channel so I can continue to provide you with free content each week!

#shopifydesign #shopifycustomization #shopifybutton