Fully Square Button Styling

Site URL: https://pug-hexahedron-nmyy.squarespace.com/

Hello!

I'm looking to make fully square buttons. I've achieved most of what I'd like, however, the placement of the text is at the top. Could you help me align it to the center? 

Code I'm using: 
 

.sqs-block-button-element {
  width:60% !important;
   box-sizing: border-box;
   min-height:120px;
   text-align:center !important;
}

https://pug-hexahedron-nmyy.squarespace.com/

Password: ruta

Thanks!

That did the trick 🙂
Any advice on the width/height being more responsive? The square shape changes once the screens get smaller now.. 

3 hours ago, Spark-Plugin said:

Hello @Anele0610, give this code a try and let me know how it goes:

.sqs-block-button-element {
  width: 60% !important;
  box-sizing: border-box;
  min-height: 120px;
  text-align: center !important;
  display: flex;
  align-items: center; /* Center vertically */
  justify-content: center; /* Center horizontally */
}

 

@Anele0610, this code could do the trick as well: 

/* Responsive styles for mobile devices */
@media (max-width: 768px) {
    .sqs-block-button-element {
        width: 90% !important; /* Adjust width for mobile */
        min-height: 100px !important; /* Optionally adjust min-height for mobile */
        padding: 15px !important; /* Add padding if needed for better touch targets */
        font-size: 16px !important; /* Adjust font size if necessary */
    }
}