84 lines
1.4 KiB
CSS
84 lines
1.4 KiB
CSS
/* RGB EFFECT */
|
|
|
|
.rgb-animate {
|
|
animation-iteration-count: infinite;
|
|
animation-duration: 40s;
|
|
animation-name: rgb_anim;
|
|
}
|
|
|
|
/* RGB HOVER EFFECT */
|
|
|
|
.rgb-animate-hvr:hover {
|
|
animation-iteration-count: infinite;
|
|
animation-duration: 20s;
|
|
animation-name: rgb_anim;
|
|
}
|
|
|
|
/* RGB ANIMATION EFFECT */
|
|
|
|
@keyframes rgb_anim {
|
|
from {
|
|
filter: hue-rotate(0deg);
|
|
}
|
|
50% {
|
|
filter: hue-rotate(360deg);
|
|
}
|
|
to {
|
|
filter: hue-rotate(0deg);
|
|
}
|
|
}
|
|
|
|
/* CSS */
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
color: white;
|
|
font-family: "Montserrat";
|
|
font-weight: 600;
|
|
letter-spacing: 0.1em;
|
|
}
|
|
|
|
.content {
|
|
min-height: 10vh;
|
|
display: flex;
|
|
flex-flow: column;
|
|
justify-content: center;
|
|
align-content: center;
|
|
align-items: center;
|
|
background: black;
|
|
}
|
|
|
|
.content:last-child {
|
|
background: #de6161; /* fallback for old browsers */
|
|
background: -webkit-linear-gradient(
|
|
to right bottom,
|
|
#2657eb,
|
|
#de6161
|
|
); /* Chrome 10-25, Safari 5.1-6 */
|
|
background: linear-gradient(
|
|
to right bottom,
|
|
#2657eb,
|
|
#de6161
|
|
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.btn {
|
|
padding: 20px 45px;
|
|
background: #5c258d; /* fallback for old browsers */
|
|
background: -webkit-linear-gradient(
|
|
to right bottom,
|
|
#4389a2,
|
|
#5c258d
|
|
); /* Chrome 10-25, Safari 5.1-6 */
|
|
background: linear-gradient(
|
|
to right bottom,
|
|
#4389a2,
|
|
#5c258d
|
|
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
|
}
|