Template:IntroButton/styles.css: Difference between revisions
No edit summary |
No edit summary |
||
| (7 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
.intro-button { | .intro-button { | ||
display: | float: left; | ||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | align-items: center; | ||
justify-content: center; | |||
background: rgba(10,10,10,0.75); | background: rgba(10,10,10,0.75); | ||
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: 10px; | margin-right: 20px; | ||
margin-bottom: 10px; | |||
min-width: 160px; | |||
min-height: 160px; | |||
text-align: center; | |||
transition: all .25s ease; | transition: all .25s ease; | ||
} | |||
.intro-button .intro-icon { | |||
margin-bottom: 15px; | |||
} | } | ||
.intro-button a { | .intro-button a { | ||
| Line 15: | Line 24: | ||
font-size: 16px; | font-size: 16px; | ||
letter-spacing: 0.5px; | letter-spacing: 0.5px; | ||
text-decoration: none !important; | text-decoration: none !important; | ||
display: block; | |||
} | } | ||
.intro-button:hover { | .intro-button:hover { | ||
| Line 22: | 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;
}
}