Button to Underline on Hover

PHOTO EMBED

Fri Nov 12 2021 17:22:58 GMT+0000 (Coordinated Universal Time)

Saved by @jackie #squarespace #button #hover #underline

//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;}
content_copyCOPY

Button changes to animated underline on hover. Can be applied to different sized buttons separately.

https://www.youtube.com/watch?v=GB_LBQ48oow&list=PLvVYrLE5_eds3eNOqxtUSG8VEwlG9otax&index=2