Jump to content

Button Outline Fill with Image with CSS

Recommended Posts

Someone asked this in another question-alt textI'm trying to recreate a gold button as pictured (without the icon), but can't seem to get the coding correct. This is what I have so far...


.sqs-block-button .sqs-block-button-element--large {
 padding: 10px 15px;
 text-shadow: 0 .5px 0 #959595;
 border-shadow:0 1px 0 #909090; }


When I create text filled with my gold foil image, I use the following code. So I'm wondering how to merge the two concepts to have gold font and a gold outline.


//Gold Text//
background: url(https://static1.squarespace.com/static/5d49bbc0fd8be40001ace1ad/t/5d6593728c58ca00012b4334/1566937971075/THEGOLD.jpg);
 background-size: 100%;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;


goldbuttonq.png.3a3447801899d122e92524bde9946ca4.png

Link to comment
  • Replies 4
  • Views 2k
  • Created
  • Last Reply
  • 1 year later...

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.