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

Edited by DevonHarris
Link to comment
  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

  • 1 year later...
On 11/19/2020 at 3:10 AM, theembodiedalchemist said:

Have you figured this out? Currently trying to implement this style as well!

If you share site url, we can check easier

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.