User:Culi/common.css: Difference between revisions
(trying it out) |
m (didn't realized this changed my site-wide styling, woops) |
||
(7 intermediate revisions by the same user not shown) | |||
Line 2: | Line 2: | ||
color: #233; |
color: #233; |
||
font-family: sans-serif; |
font-family: sans-serif; |
||
} |
|||
#content .fancy-button { |
|||
position: relative; |
|||
padding: 0.5rem; |
|||
background-color: #fefefe; |
|||
border: 2px solid #233; |
|||
border-radius: 0.15rem; |
|||
} |
|||
#content .fancy-button:hover { |
|||
color: #1c7ed6; |
|||
} |
|||
#content .fancy-button::after { |
|||
content: ""; |
|||
position: absolute; |
|||
background-color: #63e6be; |
|||
border: 2px solid #233; |
|||
width: 100%; |
|||
height: 100%; |
|||
left: 3px; |
|||
top: 4px; |
|||
z-index: -1; |
|||
pointer-events: none; |
|||
transition: all 0.25s ease-in-out; |
|||
} |
|||
#content .fancy-button:hover::after { |
|||
left: -1px; |
|||
top: -1px; |
|||
} |
|||
#content .fancy-button > a { |
|||
width: 100%; |
|||
height: 100%; |
|||
font-weight: 600; |
|||
color: inherit; |
|||
text-decoration: none; |
|||
transition: all 0.2s ease-in-out; |
|||
} |
} |
Latest revision as of 07:55, 29 January 2022
#content {
color: #233;
font-family: sans-serif;
}
#content .fancy-button {
position: relative;
padding: 0.5rem;
background-color: #fefefe;
border: 2px solid #233;
border-radius: 0.15rem;
}
#content .fancy-button:hover {
color: #1c7ed6;
}
#content .fancy-button::after {
content: "";
position: absolute;
background-color: #63e6be;
border: 2px solid #233;
width: 100%;
height: 100%;
left: 3px;
top: 4px;
z-index: -1;
pointer-events: none;
transition: all 0.25s ease-in-out;
}
#content .fancy-button:hover::after {
left: -1px;
top: -1px;
}
#content .fancy-button > a {
width: 100%;
height: 100%;
font-weight: 600;
color: inherit;
text-decoration: none;
transition: all 0.2s ease-in-out;
}