61 lines
1.7 KiB
CSS
61 lines
1.7 KiB
CSS
.footer-buttons {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 20px; /* Space between buttons */
|
|
}
|
|
|
|
.button {
|
|
background: #fafaff; /* Background color of the button */
|
|
color: white;
|
|
border-radius: 50%; /* Makes the button circular */
|
|
width: 120px; /* Diameter of the button */
|
|
height: 120px; /* Diameter of the button */
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow for depth */
|
|
cursor: pointer;
|
|
transition: background 0.3s ease, box-shadow 0.3s ease;
|
|
position: relative; /* For absolute positioning of the icon */
|
|
overflow: hidden; /* Prevents overflow of the background image */
|
|
margin: 10px; /* Creates space between buttons */
|
|
|
|
/* Border around the button */
|
|
border: 3px solid #ffffff; /* White border */
|
|
}
|
|
|
|
.button:hover {
|
|
background: #ffffff; /* Lighter color on hover */
|
|
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Larger shadow on hover */
|
|
}
|
|
|
|
.button span {
|
|
font-size: 16px; /* Size of the text */
|
|
position: absolute;
|
|
bottom: 10px; /* Positioning the text below the icon */
|
|
text-transform: uppercase; /* Capitalize the text */
|
|
}
|
|
|
|
/* Icon styles */
|
|
.icon-shop, .icon-about, .icon-cart {
|
|
background-size: cover; /* Ensures the icon covers the area */
|
|
background-position: center; /* Center the icon */
|
|
background-repeat: no-repeat;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%); /* Center the icon */
|
|
width: 100%; /* Full width of the button */
|
|
height: 100%; /* Full height of the button */
|
|
}
|
|
.icon-shop {
|
|
background-image: url(" ../shop.png");
|
|
}
|
|
.icon-cart {
|
|
background-image: url('../cart.png');
|
|
}
|
|
.icon-about {
|
|
background-image: url('../aboutus.png');
|
|
}
|
|
|