Jump to content

Pseudo Button Styling

Go to solution Solved by Ziggy,

Recommended Posts

Site URL: https://liyasafina.squarespace.com/?password=pearler

I've created some psuedo buttons with the following code. However I can't seem to figure out how to make the icon beside it larger/ not cut off? 

Desired look attached. 

// PSEUDO ARROW BUTTONS ➷ ☯ ☯ ☯ ☯ //

.sqsrte-small a strong {
	background-size:0px !important;
	text-decoration:none !important;
	position:relative; 
	line-height:1em !important;
  	text-transform: uppercase;
	font-family: 'Inter' !important;
  	font-size: 1rem !important;
}

[data-section-theme="white"] {
.sqsrte-small a strong::after {
	content: "";
	background-image:url('https://static1.squarespace.com/static/63157662f6b5811cc3a430b2/t/633bade0bf0e4c428278ee8e/1664855520990/Arrow-Dark.png');
	display:inline-block;
    background-repeat:no-repeat;
  	background-position:center center;
  	background-size:70%;
  	pointer-events:auto;
  	opacity:1;
  	transition:opacity .8s,
      transform .5s;
    height:100%;
    position:absolute;
   top:0;
    padding:0em 1.4em;
}
  
}

Thanks!

Screen Shot 2022-10-06 at 4.13.58 pm.png

Screen Shot 2022-10-06 at 4.14.14 pm.png

Link to comment
  • Solution

Try this tweak to the background size, top, and padding:

[data-section-theme="black"] .sqsrte-small a strong::after {
    content: "";
    background-image: url(https://static1.squarespace.com/static/6315766…/t/633bc05…/1664860255587/Arrow.png);
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 80%;
    pointer-events: auto;
    opacity: 1;
    transition: opacity .8s,transform .5s;
    height: 100%;
    position: absolute;
    top: -80%;
    padding: 1em 1.8em;
}

 

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

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.