patery-ui.css

/*
    A modern website theme framework and simplified elements. Patery UI was born to simplify and also bring a modern touch, making the website interface more professional. (Easy access for newbies to learn web programming)
*/
*{
    font-size: 15px;
}
:root{
    --gray: #1a1a1a;
    --gray-light: #2f2f2f;
    --gray-lighter: #4a4a4a;
    --gray-lightest: #6a6a6a;
    --gray-moment: #303030af;
    --red: #ff0a33;
    --red-moment: #ff3758;
    --blue: #00a0ff;
    --blue-moment: #0059ff;
    --green: #00ff4c;
    --green-moment: #00ff55;
    --yellow: #fdef2d;
    --yellow-moment: #fad313;
    --orange: #ff9c00;
    --orange-moment: #ff9c00;
    --purple: #ff00ff;
    --purple-moment: #ff00ff;
    --pink: #ff00ff;
    --pink-moment: #ff00ff;
    --white: #e9e9e9;
    --black: #000000;
    --transparent: transparent;
    --transparent-moment: rgba(0,0,0,0.5);
    --transparent-light: rgba(255,255,255,0.5);
    --transparent-dark: rgba(0,0,0,0.5);
    --transparent-lightest: rgba(255,255,255,0.1);
    --transparent-darkest: rgba(0,0,0,0.1);
    --transparent-light-moment: rgba(255,255,255,0.2);
    --transparent-dark-moment: rgba(0,0,0,0.5);
    --transparent-light-lightest: rgba(255,255,255,0.1);
    --transparent-dark-darkest: rgba(0,0,0,0.1);
    --transparent-light-light: rgba(255,255,255,0.2);
    --transparent-dark-dark: rgba(0,0,0,0.2);
}
button{
    border-style: none;
    border-radius: 5px;
    padding: 1rem 2rem;
    background: #e2e2e2;
    color: var(--gray-lightest);
    transition: 0.4s;
}
.paterybutton {
    position: relative;
    overflow: hidden;
    transition: background 400ms;
    background-color: var(--gray-moment);
    padding: 1rem 2rem;
    outline: 0;
    color: var(--white);
    border: 0;
    border-radius: 0.25rem;
    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.3); /* black with 30% opacity */
    cursor: pointer;
}
span.ri-67 {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    animation: ri-67 600ms linear;
    background-color: var(--transparent-light-moment);
}
.dark{
    background-color: var(--gray-moment);
    color: #fff;
}
.light{
    background-color: var(--white);
    color: var(--gray-lightest);
    box-shadow: none;
}
  
@keyframes ri-67 {
    to {
      transform: scale(4);
      opacity: 0;
    }
}
  
.hello{
    background: #0059ff;
}