Jump to content

Is it possible to make gradient button border?

Recommended Posts

Hello guys,

I am very new with using CSS Custom here. I have seen alot of tutorial for making a button gradient. However, I wish to make the button's border also gradient.

I am attaching you my button design. Please let me know how if it possible. Or if there is anyway to replace the button with my own button design?

Looking forward to hearing from you and thank you in advance,

Chira

Screenshot 2020-01-25 at 10.30.34 PM.png

Edited by Chira
Link to comment

You could use this code when targeting your specific button class in Custom CSS - just change out the colors: https://codepen.io/miraviolet/pen/ZobWEg

 

christyprice.com  🇺🇸 Austin, TX US 

 Get my 100+ item Client Process Checklist for $17.
📔 Flourish Journal for Creative Entrepreneurs - 365 days of prompts
🎥 Watch Circle Live: Hello Income (feat. Christy Price and Jeremy Schwartz)
🎬 Watch It's Not Hard to Say Goodbye: Crafting Client Offboarding from Circle Day 2023

Link to comment
Quote
On 1/29/2020 at 3:44 AM, christyprice said:

You could use this code when targeting your specific button class in Custom CSS - just change out the colors: https://codepen.io/miraviolet/pen/ZobWEg

 

 

I took a little sometime to figure out how to apply your code to my website element. But it works! 

It turns out wonderful! I am so happy! 🤩🤩❤️ Thank you so much for your help! Without your help, I wouldn't see my design becomes realized.🙏

 

.medium-button-style-outline .sqs-alternate-block-style-container .sqs-block-button .sqs-block-button-element--medium{
  border-radius: 100rem;
  padding: 1rem;
  font-family: 'Helvetica';
  letter-spacing: 0.47px;
  font-weight: bold;
  font-size: 1rem;
  padding: 1rem 3rem;
  color: #f1315a;
  box-shadow: 0 0 6px 0 rgba(157, 96, 212, 0.5);
  border: solid 3px transparent;
  background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(101deg, #ffefce, #f1315a, #56a9cc);
  background-origin: border-box;
  background-clip: content-box, border-box;
  box-shadow: 2px 1000px 1px #fff inset;
}

.medium-button-style-outline .sqs-alternate-block-style-container .sqs-block-button .sqs-block-button-element--medium:hover {
  box-shadow: none;
  color: white;
}

 

This is my result from your code

Screenshot 2020-01-31 at 2.20.49 PM.png

Edited by Chira
Link to comment

@Chira, that looks fantastic! Great job and so glad I could help. ☺️

christyprice.com  🇺🇸 Austin, TX US 

 Get my 100+ item Client Process Checklist for $17.
📔 Flourish Journal for Creative Entrepreneurs - 365 days of prompts
🎥 Watch Circle Live: Hello Income (feat. Christy Price and Jeremy Schwartz)
🎬 Watch It's Not Hard to Say Goodbye: Crafting Client Offboarding from Circle Day 2023

Link to comment
  • 1 year later...
On 5/27/2021 at 1:37 AM, EbonyW said:

Hello! Any insight on how to use this code to get the same type of button (gradient color) but rounded style instead of pill? Thanks!

--

Ebony

Can you share link to your site? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 years later...

I this code for fluid engine? I am trying to replicate but it is not working. Also I am using the font style in my pack, hex color codes and trying to apply to all of my primary buttons. Specifically the one in my navbar.

This is the gradient color and angle, I'd like to use if possible since it matches my homepage: (270deg, #fe9c37, #da6026, #114155, #3b97b6, #693237)

Link to comment
On 10/8/2023 at 7:49 AM, identifyasaproblem said:

If apply to header button, use this code

a.btn {
  color: #f1315a !important;
  box-shadow: 0 0 6px 0 rgba(157, 96, 212, 0.5) !important;
  border: solid 3px transparent;
  background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(101deg, #ffefce, #f1315a, #56a9cc) !important;
  background-origin: border-box !important;
  background-clip: content-box, border-box !important;
}

a.btn:hover {
  box-shadow: none !important;
  color: white !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.