Jump to content

CSS customisation of buttons – post June 2022 update

Recommended Posts

 

Greetings

 

I'm trying to style a tertiary button to match the visual appearance of the nav bar dropdown…

 

Nav bar has this code:

.header-nav-folder-content * {
    color: white !important
}
.header-nav-folder-content {
  	background: linear-gradient(to bottom, #006C7F, #181B26)
}
.header-nav-folder-content {
	border: 1px solid #EBF6F7
}
.header-nav-folder-content {
	box-shadow: -3px 5px 5px rgba(0,0,0,0.25)
}

 

Something similar should work for the buttons, but many properties aren't being applied
e.g. background and border won't play nice in this snippet

.sqs-block-button .sqs-block-button-element--tertiary  { 
  	border-radius: 20px 20px 0px 0px;
  	background: linear-gradient(to bottom, #006C7F, #181B26);
	border: 3px solid #EBF6F7;
  	box-shadow: -3px 5px 5px rgba(0,0,0,0.25); 
   }

Once this is pinned down I will then add in hover states.

I'd rather stay with the button-element--tertiary naming for classes. Someone else will be maintaining the site once its live. Tertiary is more sensible a naming, than small, medium and large.

Where am I going wrong?

Thanks

 

Squarespace version 7.1
Theme: Hollie Beaumont  
[I think. No theme info displayed in the Dashboard]
NOT using Fluid Engine

 

 

Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

add !important to make code has highest priority

.sqs-block-button .sqs-block-button-element--small, .sqs-block-button-element--tertiary {
    border-radius: 20px 20px 0px 0px;
    background: linear-gradient(to bottom,#006c7f,#181b26) !important;
    border: 3px solid #ebf6f7;
    box-shadow: -3px 5px 5px rgb(0,0,0,0.25);
}

 

Edited by tuanphan

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.