Zero block
Click "Block Editor" to enter the edit mode. Use layers, shapes and customize adaptability. Everything is in your hands.
Tilda Publishing
create your own block from scratch
LET'S GO!
@import url('https://fonts.googleapis.com/css?family=Rammetto+One'); body, html{ margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background: #ffdb14ff; } @button-h: 100px; @button-w: 300px; *{ font-family: "Arial"; text-decoration: none; color: white; } .container{ position: relative; width: @button-w; height: @button-h; perspective: 1000px; } .button{ display: block; width: inherit; height: inherit; transform-style: preserve-3d; &:hover &_side:after{ opacity: 1; } &_side{ position: absolute; width: inherit; height: inherit; border: 6px solid white; line-height: @button-h; text-align: center; font-size: 32px; font-weight: bold; display: block; box-sizing: block; backface-visibility: hidden; transition: 0.5s ease; opacity: 1; &:after{ width: 100%; height: 100%; content: ''; background: linear-gradient(to right, #24c6dc, #514a9d); top: 0; left: 0; position: absolute; z-index: -1; animation: 15s hue infinite; opacity: 0; transition: opacity 0.3s ease; } } &_front{ transform: translateZ(@button-h/2); } &_back{ transform: rotateY(-180deg) translateZ(@button-h/2); } &_right{ width: @button-h; transform: rotateY(90deg) translateZ(@button-w - @button-h/2); } &_left{ width: @button-h; transform: rotateY(-90deg) translateZ(@button-h/2); } &_top{ transform: rotateX(90deg) translateZ(@button-h/2) ; } &_bottom{ transform: rotateX(-90deg) translateZ(@button-h/2) ; } &_glow{ position: absolute; content: ''; height: 100%; width: 100%; background: linear-gradient(to right, #24c6dc, #514a9d); animation: 15s hue-blur infinite; opacity: 1; } } @keyframes hue-blur { 0%{ filter: blur(30px) hue-rotate(0deg); } 50%{ filter: blur(80px) hue-rotate(360deg); } 100%{ filter: blur(30px) hue-rotate(0deg); } } @keyframes hue { 0%{ filter: hue-rotate(0deg) blur(30px); } 50%{ filter: hue-rotate(360deg) blur(30px); } 100%{ filter: hue-rotate(0deg) blur(30px); } }
.tn-elem[data-elem-id="1623334594454"] { }