Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
Chira

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

Share this post


Link to post

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

 

Share this post


Link to post
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

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...