Underline Button Hover Effects with CSS // Squarespace CSS Tutorial

This custom CSS snippet is one of my new favorites! It created an animation that underlines a button when you hover over it. Pretty cool right?!

You can change the color of the line, thickness, and make it solid, dashed, or a row of dots. Check out the video to see it in action! When you are ready, I have isolated the codes for small, medium, and large buttons below. So copy, paste, and update for your own brand colors so you can have a super cool button effect on your site too! 

 
 

Why does this code look like a paragraph? It is a long one so I condensed it for easier copy and paste action. The last bit of the code, in bold below, is where you can update things like color, type, and thickness of the underline effect.

Small Button

.sqs-block-button-element--small {  position:relative; height: 60px; line-height: 60px;  text-align: center; transition: 0.5s; padding: 0 20px;  cursor: pointer; -webkit-transition:0.5s;}.sqs-block-button-element--small:hover {  background-color: transparent; border-color: transparent; color: #000000;} .sqs-block-button-element--small:hover:before{ transition-delay: .2s; }.sqs-block-button-element--small:before{  width: 0%; height:100%; z-index: 3; content:''; position: absolute; bottom:-1px; left:0; box-sizing: border-box; transition: .2s;}.sqs-block-button-element--small:hover:before { width: 100% !important;  transition: .7s; }.sqs-block-button-element--small:before { border-bottom: 2px solid #000000;}

Medium Button

.sqs-block-button-element--medium {  position:relative; height: 60px; line-height: 60px;  text-align: center; transition: 0.5s; padding: 0 20px;  cursor: pointer; -webkit-transition:0.5s;}.sqs-block-button-element--medium:hover {  background-color: transparent; border-color: transparent; color: #000000;} .sqs-block-button-element--medium:hover:before{ transition-delay: .2s; }.sqs-block-button-element--medium:before{  width: 0%; height:100%; z-index: 3; content:''; position: absolute; bottom:-1px; left:0; box-sizing: border-box; transition: .2s;}.sqs-block-button-element--medium:hover:before { width: 100% !important;  transition: .7s; }.sqs-block-button-element--medium:before { border-bottom: 2px solid #000000;}

Large Button

.sqs-block-button-element--large {  position:relative; height: 60px; line-height: 60px;  text-align: center; transition: 0.5s; padding: 0 20px;  cursor: pointer; -webkit-transition:0.5s;}.sqs-block-button-element--large:hover {  background-color: transparent; border-color: transparent; color: #000000;} .sqs-block-button-element--large:hover:before{ transition-delay: .2s; }.sqs-block-button-element--large:before{  width: 0%; height:100%; z-index: 3; content:''; position: absolute; bottom:-1px; left:0; box-sizing: border-box; transition: .2s;}.sqs-block-button-element--large:hover:before { width: 100% !important;  transition: .7s; }.sqs-block-button-element--large:before { border-bottom: 2px solid #000000;}


Want more?

Get a weekly CSS tutorial from me, in your inbox every Tuesday!