Fill Up
/* button styling */
button {
padding: 10px 20px;
background: #f8f3ff;
color: #2D0367;
font-family: "Quicksand", sans-serif;
font-size: 1.2em;
border: 2px solid #2D0367;
transition: 0.25s;
}
button:hover, button:focus {
outline: none;
}
/* hover effects */
.fill-up:hover, .fill-up:focus {
color: #f8f3ff;
box-shadow: inset 0 -3em 0 0 #2D0367;
}
Fill In
/* button styling */
button {
padding: 10px 20px;
background: #f8f3ff;
color: #2D0367;
font-family: "Quicksand", sans-serif;
font-size: 1.2em;
border: 2px solid #2D0367;
transition: 0.25s;
}
button:hover, button:focus {
outline: none;
}
/* hover effects */
.fill-in:hover, .fill-in:focus {
box-shadow: inset 0 0 0 2em #00B0B8;
border-color: #00B0B8;
color: #f8f3ff;
}
Neumorphism
/* button styling */
button {
padding: 10px 20px;
background: #f8f3ff;
color: #2D0367;
font-family: "Quicksand", sans-serif;
font-size: 1.2em;
border: 2px solid #2D0367;
transition: 0.25s;
}
button:hover, button:focus {
outline: none;
}
/* hover effects */
.neumorphism {
border: 0;
border-radius: 5px;
}
.neumorphism:hover, .neumorphism:focus {
color: #00B0B8;
transform: translate(0, -5px);
box-shadow: -5px -5px 15px #FFFFFF, 5px 5px 15px #ede0ff;
}
Raise
/* button styling */
button {
padding: 10px 20px;
background: #f8f3ff;
color: #2D0367;
font-family: "Quicksand", sans-serif;
font-size: 1.2em;
border: 2px solid #2D0367;
transition: 0.25s;
}
button:hover, button:focus {
outline: none;
}
/* hover effects */
.raise:hover, .raise:focus {
transform: translateY(-0.25em);
box-shadow: 0 0.5em 0.5em -0.4em #00B0B8;
border-color: #00B0B8;
color: #00B0B8;
}
Slide
/* button styling */
button {
padding: 10px 20px;
background: #f8f3ff;
color: #2D0367;
font-family: "Quicksand", sans-serif;
font-size: 1.2em;
border: 2px solid #2D0367;
transition: 0.25s;
}
button:hover, button:focus {
outline: none;
}
/* hover effects */
.slide:hover, .slide:focus {
box-shadow: inset 6.5em 0 0 0 #00B0B8;
border-color: #00B0B8;
color: #f8f3ff;
}