Template:ButtonBox/styles.css: Difference between revisions
Appearance
No edit summary |
No edit summary |
||
| Line 13: | Line 13: | ||
text-align: center; | text-align: center; | ||
/* box-shadow: 0 2px 4px rgba(0,0,0,0.1); */ | /* box-shadow: 0 2px 4px rgba(0,0,0,0.1); */ | ||
transition: | transition: background-color 0.2s ease, box-shadow 0.2s ease; | ||
} | } | ||
| Line 34: | Line 34: | ||
/* Hover effect for interactivity */ | /* Hover effect for interactivity */ | ||
.buttonbox-entry:hover { | .buttonbox-entry:hover { | ||
background-color: #e0e0e0; | |||
cursor: pointer; | cursor: pointer; | ||
} | } | ||
Revision as of 15:14, 24 June 2025
.buttonbox {
margin: 1em auto;
border-spacing: 1em;
border-collapse: separate;
}
/* Each individual entry box */
.buttonbox-entry {
width: 120px;
padding: 0.5em;
border: 1px solid #ccc;
background: #fff;
text-align: center;
/* box-shadow: 0 2px 4px rgba(0,0,0,0.1); */
transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
/* Image inside the entry */
.buttonbox-entry img {
width: 100px;
height: 100px;
object-fit: cover;
border-radius: 4px;
margin-bottom: 0.3em;
}
/* Label under the image */
.buttonbox-label {
font-size: 0.9em;
font-weight: bold;
color: #333;
}
/* Hover effect for interactivity */
.buttonbox-entry:hover {
background-color: #e0e0e0;
cursor: pointer;
}
.buttonbox-label {
margin-top: 0.3em;
font-size: 0.9em;
word-wrap: break-word;
}