better button
This commit is contained in:
parent
d42fb5a35b
commit
da0af15738
|
@ -97,7 +97,7 @@ body {
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
transform: rotate(-3deg);
|
transform: rotate(-3deg);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background: -webkit-linear-gradient(90deg, var(--bg) 25%,var(--accent2-alt) 100%);
|
background: -webkit-linear-gradient(90deg, var(--bg) 25%,transparent 100%);
|
||||||
-webkit-background-clip: text;
|
-webkit-background-clip: text;
|
||||||
-webkit-text-fill-color: transparent;
|
-webkit-text-fill-color: transparent;
|
||||||
filter: blur(2px);
|
filter: blur(2px);
|
||||||
|
@ -114,7 +114,9 @@ body {
|
||||||
.description {
|
.description {
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
background: var(--bg-alt);
|
background: var(--bg-alt);
|
||||||
background: linear-gradient(33deg, transparent 0%, var(--bg) 90%, transparent 90%);
|
box-shadow: 1px 1px 28px 24px var(--bg-alt);
|
||||||
|
-webkit-box-shadow: 1px 1px 28px 24px var(--bg-alt);
|
||||||
|
-moz-box-shadow: 1px 1px 28px 24px var(--bg-alt);
|
||||||
> * {
|
> * {
|
||||||
margin: 40px !important;
|
margin: 40px !important;
|
||||||
}
|
}
|
||||||
|
@ -122,16 +124,19 @@ body {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
font-size: xxx-large;
|
|
||||||
.button {
|
.button {
|
||||||
background-image: linear-gradient(228deg, var(--accent1-alt), var(--bg-alt));
|
background-image: linear-gradient(228deg, var(--accent1-alt), var(--bg-alt));
|
||||||
background-size: 400% 400%;
|
background-size: 400% 400%;
|
||||||
-webkit-animation: backgroundBlink 7s ease infinite;
|
-webkit-animation: backgroundBlink 7s ease infinite;
|
||||||
-moz-animation: backgroundBlink 7s ease infinite;
|
-moz-animation: backgroundBlink 7s ease infinite;
|
||||||
animation: backgroundBlink 7s ease infinite;
|
animation: backgroundBlink 7s ease infinite;
|
||||||
flex: 0 0 25px;
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
line-height: 100px;
|
||||||
margin: 0 0 20px 0;
|
margin: 0 0 20px 0;
|
||||||
padding: 0 10px;
|
padding:0;
|
||||||
|
font-size: 65px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -172,10 +177,17 @@ body {
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 1.1em
|
font-size: 1.1em
|
||||||
}
|
}
|
||||||
}
|
> ul {
|
||||||
|
.button {
|
||||||
|
width: 75px;
|
||||||
|
height: 75px;
|
||||||
|
line-height: 75px;
|
||||||
|
|
||||||
|
font-size: 55px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue