/* Custom styles for the Inter font and general button styling */
.wp-button-container {
display: flex;
justify-content: center;
align-items: center;
width: 100%; /* Ensure container takes full width available in the block */
padding: 20px 0; /* Add some vertical padding for spacing */
box-sizing: border-box;
}
/* Link button styling */
.link-button {
display: flex; /* Use flexbox for alignment */
align-items: center; /* Vertically align items */
background-color: #e5e7eb; /* Light gray background for buttons */
color: #333;
padding: 15px 20px;
border-radius: 15px; /* Rounded corners for buttons */
text-decoration: none;
font-weight: 500;
font-size: 1rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: transform 0.2s ease, box-shadow 0.2s ease;
position: relative; /* For the three dots icon */
width: 100%; /* Make button take full width of its container */
max-width: 350px; /* Max width to control size on larger screens */
}
.link-button:hover {
transform: translateY(-3px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
/* Icon within the link button */
.link-button-icon {
width: 40px;
height: 40px;
border-radius: 10px;
object-fit: cover;
margin-right: 15px;
flex-shrink: 0; /* Prevent icon from shrinking */
}
/* Text content within the link button */
.link-button-text {
flex-grow: 1; /* Allow text to take available space */
text-align: left; /* Align text to the left */
}
/* Three dots icon styling */
.link-button-dots {
position: absolute;
right: 15px;
font-size: 1.2rem;
color: #666;
}
/* Responsive adjustments for smaller screens */
@media (max-width: 600px) {
.link-button {
padding: 12px 15px;
font-size: 0.95rem;
}
.link-button-icon {
width: 35px;
height: 35px;
margin-right: 10px;
}
}
Fix IT - today. 