[class*="appear"] {
    --default-props: opacity;
    --props: var(--default-props);
}
[class*="appear"]:not(.inview) {
    opacity: 0;
}
.appear-up{
    --props: var(--default-props) + transform;
    transform: translateY(2em);
}
.appear-up.inview{
    transform: none;
}
button[class*="appear"]{
    background: none;
    border: none;
    box-sizing: content-box;
    padding: 0;
    margin: 0;
    height: auto;
}
@media only screen and (max-width: 730px){
    button[class*="appear"]{
        width: 80%;
    }
}

button[class*="appear"] span {
    height: 100%;
    width: 100%;
    display: block;
}
.appear-visible:not(.inview){
    opacity: 1;
}
  
[class*="appear"].inview {
    transition-property: var(--props);
    transition-duration: 0.5s;
    transition-delay: 0.15s;
    transition-timing-function: ease-out;
}