Template:IntroButton/styles.css: Difference between revisions
Created page with ".intro-button a, .intro-button span { background-color: #ED8136; color: #fff; padding: 10px 20px; border-radius: 8px; text-decoration: none; font-weight: bold; font-family: 'Rubik', sans-serif; display: inline-block; transition: background-color 0.2s; } .intro-button a:hover span { background-color: #FAB243; }" |
No edit summary |
||
| (14 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
.intro-button | .intro-button { | ||
float: left; | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
text- | justify-content: center; | ||
font-weight: | background: rgba(10,10,10,0.75); | ||
font- | border: 1px solid rgba(120,165,255,0.2); | ||
display: | 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; | |||
} | |||
} | } | ||
.intro-button | /* 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;
}
}