Border 35

.create-button { font-family: monospace; font-weight: bold; text-transform: uppercase; background: #000; color: #fff; border: none; border-radius: 0; position: absolute; left: 50%; top: 50%; position: relative; transform: translate(-50%,-50%); border-radius: 3px; cursor: pointer; padding: 0.8em 1.6em; font-size: 18px; overflow: hidden; &:focus, &:active { outline: none; } &:before, &:after { content: ''; position: absolute; bottom: 0; top: 0; left: 0; right: 0; height: auto; width: auto; z-index: -1; border-radius: inherit; background: inherit; } &:before { background: linear-gradient(90deg, #0ebeff, #ffdd40, #ae63e4, #47cf73, #0ebeff, #ffdd40, #ae63e4, #47cf73); background-size: 200% 200%; } &:after { margin: 3px; } &:hover:before, &:focus:before { animation: rainbow-border 1.5s linear infinite } } @keyframes rainbow-border { 0% { background-position: 0% 50% } 100% { background-position: 200% 50% } }