/*
* Custom CSS to create a button style for any link ( tag)
* with the class 'custom-button-link'.
* Add this to Design -> Custom CSS.
*/
.custom-button-link {
/* Layout and Display */
display: inline-block; /* Essential to allow padding and width */
padding: 0.75rem 1.5rem; /* Vertical padding | Horizontal padding */
border-radius: 4px; /* Slightly rounded corners */
text-align: center;
text-decoration: none !important; /* Remove the standard link underline */
cursor: pointer;
transition: background-color 0.2s ease, transform 0.1s ease;
/* Colors and Background */
background-color: #3e6d8d; /* Primary Button Color (e.g., a nice blue) */
color: #ffffff !important; /* Text Color (white) */
border: 2px solid #3e6d8d; /* Border color matches background */
/* Typography */
font-size: 1rem;
font-weight: 600; /* Semi-bold text */
letter-spacing: 0.05em;
line-height: 1.5; /* Ensures text is centered well */
}
/* Hover Effect */
.custom-button-link:hover {
background-color: #2b4e63; /* Darker color on hover */
border-color: #2b4e63;
transform: translateY(-1px); /* Slight lift for effect */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
/* Secondary/Outline Button (Optional style) */
.custom-button-link.secondary {
background-color: transparent;
color: #3e6d8d !important; /* Text color matches the border */
border: 2px solid #3e6d8d;
}
.custom-button-link.secondary:hover {
background-color: #f0f0f0; /* Light background on hover */
color: #3e6d8d !important;
}
