Adding tertiary color and new button design.
This commit is contained in:
parent
1f7bd1dfb4
commit
7634557b28
6 changed files with 47 additions and 22 deletions
|
@ -25,7 +25,8 @@
|
|||
height: -moz-fit-content;
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
transition: box-shadow 0.15s ease-in-out, filter 0.15s ease-in-out;
|
||||
transition: box-shadow 0.15s ease-in-out, filter 0.15s ease-in-out, background-position 0.5s;
|
||||
border-radius: 5px;
|
||||
|
||||
&.tag {
|
||||
border: solid 1px #AEAEAE;
|
||||
|
@ -52,31 +53,35 @@
|
|||
}
|
||||
}
|
||||
|
||||
&.primary:not(.tag), &.secondary:not(.tag) {
|
||||
margin: 0.1em;
|
||||
&.primary:not(.tag), &.secondary:not(.tag), &.tertiary:not(.tag) {
|
||||
margin: 0.2em;
|
||||
text-transform: uppercase;
|
||||
font-size: larger;
|
||||
box-shadow: 0px 0px 2px 0px #000000;
|
||||
box-shadow: 0px 0px 2px 0px #888888;
|
||||
filter: brightness(100%);
|
||||
|
||||
&:active {
|
||||
box-shadow: 0px 0px 8px 0px #000000;
|
||||
filter: brightness(80%);
|
||||
background-image: linear-gradient(70deg, var(--first-color) 0%, var(--second-color) 51%, var(--first-color) 100%);
|
||||
background-size: 200% auto;
|
||||
|
||||
&:active, &:hover {
|
||||
box-shadow: 2px 2px 6px 0px #888888;
|
||||
z-index: 2
|
||||
}
|
||||
|
||||
&:active {
|
||||
filter: brightness(80%);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0px 0px 8px 0px #000000;
|
||||
filter: brightness(98%);
|
||||
z-index: 2
|
||||
}
|
||||
|
||||
& a, &:not(div) {
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
color: black;
|
||||
padding: 0.5em;
|
||||
background-color: var(--theme-color);
|
||||
padding: 0.55em;
|
||||
/*background-color: var(--theme-color);*/
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue