<style>
.btn{background:none;border:2px solid;border-bottom-width:4px;font:700 14px/1 Noto Sans,sans-serif;letter-spacing:inherit;margin:1em;padding:1em 2em;transition:color 1s;text-transform:uppercase}.btn-1{color:#9c89f7}.btn-1:hover{-webkit-animation:halftone 1s forwards;animation:halftone 1s forwards;background:radial-gradient(circle,#9c89f7 0.2em,transparent 0.25em) 0 0/1.25em 1.25em,radial-gradient(circle,#9c89f7 0.2em,transparent 0.25em) 6.25em 6.25em/1.25em 1.25em;color:#e4f789}@-webkit-keyframes halftone{100%{background-size:2.375em 2.375em,0.1em 0.1em}}@keyframes halftone{100%{background-size:2.375em 2.375em,0.1em 0.1em}}.btn-2{color:#82f6d8}.btn-2:hover{-webkit-animation:stripes-move 0.75s infinite linear;animation:stripes-move 0.75s infinite linear;background:repeating-linear-gradient(45deg,#82f6d8 0,#82f6d8 0.25em,transparent 0.25em,transparent 0.5em);color:#f682a0}@-webkit-keyframes stripes-move{100%{background-position:5em 0}}@keyframes stripes-move{100%{background-position:5em 0}}.btn-3{color:#d3f169}.btn-3:hover{-webkit-animation:sawtooth 0.35s infinite linear;animation:sawtooth 0.35s infinite linear;background:linear-gradient(45deg,#d3f169 0.5em,transparent 0.5em) 0 0/1em 1em,linear-gradient(-45deg,#d3f169 0.5em,transparent 0.5em) 0 0/1em 1em;color:#8769f1}@-webkit-keyframes sawtooth{100%{background-position:1em 0}}@keyframes sawtooth{100%{background-position:1em 0}}.btn-4{color:#eea163}.btn-4:hover{-webkit-animation:zigzag 1s linear infinite;animation:zigzag 1s linear infinite;background:linear-gradient(135deg,rgba(238,161,99,0.25) 0.25em,transparent 0.25em) -0.5em 0,linear-gradient(225deg,rgba(238,161,99,0.25) 0.25em,transparent 0.25em) -0.5em 0,linear-gradient(315deg,rgba(238,161,99,0.25) 0.25em,transparent 0.25em) 0 0,linear-gradient(45deg,rgba(238,161,99,0.25) 0.25em,transparent 0.25em) 0 0;background-size:0.75em 0.75em;color:#63b0ee}@-webkit-keyframes zigzag{100%{background-position:1em 0,1em 0,-0.75em 0,-0.75em 0}}@keyframes zigzag{100%{background-position:1em 0,1em 0,-0.75em 0,-0.75em 0}}.btn-5{color:#7cf07f}.btn-5:hover{-webkit-animation:blinds 0.75s linear forwards;animation:blinds 0.75s linear forwards;background:linear-gradient(0deg,#7cf07f 25%,transparent 25%) 0 0/0.5em 0.5em,linear-gradient(0deg,#88d6f3 50%,transparent 50%) 0 0/1em 1em;color:#f07ced}@-webkit-keyframes blinds{100%{background-position:0 0,0 -3em;background-size:0 0,1em 6em}}@keyframes blinds{100%{background-position:0 0,0 -3em;background-size:0 0,1em 6em}}.btn-6{color:#f9879b}.btn-6:hover{-webkit-animation:pulse 1s ease-in infinite;animation:pulse 1s ease-in infinite;background:radial-gradient(circle,rgba(249,135,155,0.25) 43%,transparent 50%) 0 0/1em 1em,radial-gradient(circle,rgba(249,135,155,0.25) 43%,transparent 50%) 0.5em 0.5em/2em 2em;color:#0bdcb7}@-webkit-keyframes pulse{50%{background-position:0.66em 0.66em,-0.33em -0.33em}100%{background-size:2em 2em,1em 1em;background-position:-1.5em -1.5em,-1em -1em}}@keyframes pulse{50%{background-position:0.66em 0.66em,-0.33em -0.33em}100%{background-size:2em 2em,1em 1em;background-position:-1.5em -1.5em,-1em -1em}}
</style>