Template:IntroButton/styles.css: Difference between revisions
No edit summary |
No edit summary |
||
| (3 intermediate revisions by the same user not shown) | |||
| Line 8: | Line 8: | ||
border: 1px solid rgba(120,165,255,0.2); | border: 1px solid rgba(120,165,255,0.2); | ||
border-radius: 10px; | border-radius: 10px; | ||
padding: | padding: 25px 20px; | ||
margin-right: 20px; | margin-right: 20px; | ||
margin-bottom: 10px; | margin-bottom: 10px; | ||
min-width: 160px; | min-width: 160px; | ||
min-height: | min-height: 160px; | ||
text-align: center; | text-align: center; | ||
transition: all .25s ease; | transition: all .25s ease; | ||
| Line 31: | Line 31: | ||
background: #1c1e25; | background: #1c1e25; | ||
transform: translateY(-2px); | transform: translateY(-2px); | ||
} | |||
/* Mobile: Stack vertically */ | |||
@media (max-width: 768px) { | |||
.intro-button { | |||
float: none !important; | |||
display: flex !important; | |||
margin: 0 auto 20px auto !important; | |||
width: auto !important; | |||
max-width: 200px; | |||
} | |||
} | |||
/* Even smaller screens */ | |||
@media (max-width: 480px) { | |||
.intro-button { | |||
float: none !important; | |||
display: block !important; | |||
margin: 0 auto 20px auto !important; | |||
} | |||
} | } | ||
Latest revision as of 21:59, 5 November 2025
.intro-button {
float: left;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(10,10,10,0.75);
border: 1px solid rgba(120,165,255,0.2);
border-radius: 10px;
padding: 25px 20px;
margin-right: 20px;
margin-bottom: 10px;
min-width: 160px;
min-height: 160px;
text-align: center;
transition: all .25s ease;
}
.intro-button .intro-icon {
margin-bottom: 15px;
}
.intro-button a {
color: #FAB243 !important;
font-weight: 600;
font-size: 16px;
letter-spacing: 0.5px;
text-decoration: none !important;
display: block;
}
.intro-button:hover {
border-color: #78A5FF;
background: #1c1e25;
transform: translateY(-2px);
}
/* Mobile: Stack vertically */
@media (max-width: 768px) {
.intro-button {
float: none !important;
display: flex !important;
margin: 0 auto 20px auto !important;
width: auto !important;
max-width: 200px;
}
}
/* Even smaller screens */
@media (max-width: 480px) {
.intro-button {
float: none !important;
display: block !important;
margin: 0 auto 20px auto !important;
}
}