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

Button block custom css



Hello colleagues, I have been tasked with duplicating a site without access to the original (!). Most of the site is created using standard styling options available in Brine/Heights. But there is one element that I think must be done with custom css. There is a hover animation effect on the buttons that I can't replicate.

The standard is for the button to fade a little on hover.

The customisation is to make the button go green #20CE9C with a drop shadow on hover.

This is the site: https://www.kellerlenkner.com/ 

Although I can do a little coding I am new to custom css and not sure how to go about this.

Please can anyone advise? 

Thank you



Link to post
  • Answers 1
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

1 answer to this question

Recommended Posts

  • 0

Hey I found the code! Just in case anyone else can use this...

a:hover{color:#20ce9c !important}.small-button-style-solid .sqs-block-button .sqs-block-button-element--small,.medium-button-style-solid .sqs-block-button .sqs-block-button-element--medium,.large-button-style-solid .sqs-block-button .sqs-block-button-element--large,.form-block .form-wrapper .button,.newsletter-block .newsletter-form-button{transition:all 200ms cubic-bezier(.02,.01,.47,1) !important;transition-property:all !important;transition-duration:200ms !important;transition-timing-function:cubic-bezier(.02,.01,.47,1) !important;transition-delay:initial !important;padding-top:18px;padding-bottom:18px;min-width:150px;background:#243040}.small-button-style-solid .sqs-block-button .sqs-block-button-element--small:hover,.medium-button-style-solid .sqs-block-button .sqs-block-button-element--medium:hover,.large-button-style-solid .sqs-block-button .sqs-block-button-element--large:hover,.form-block .form-wrapper .button:hover,.newsletter-block .newsletter-form-button:hover{opacity:1 !important;background:#20ce9c;color:#fff !important;box-shadow:0 10px 20px rgba(0,0,0,.2) !important}

Added to custom css and bingo 😄

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