This post is saved as a draft.
#212121
1.cti { 2 background-color: #6019bd; 3 padding: 17px 30px; 4 border: 3px solid transparent; 5 border-radius: 0.6em; 6 transition: 0.2s; 7} 8 9.cti:hover { 10 background-color: transparent; 11 border: 3px solid #6019bd; 12 box-shadow: 0px 0px 27px 5px #6019bd; 13} 14 15.CTI { 16 color: #fff; 17 font-family: 'Courier New', Courier, monospace; 18 font-size: 17px; 19 font-weight: bold; 20 overflow: hidden; 21 border-right: 4px solid transparent; 22 white-space: nowrap; 23 margin: 0 auto; 24} 25 26.cti:hover .CTI { 27 border-right: 4px solid #6019bd; 28 animation: letters 1.75s steps(22, end), 29 cursor .4s step-end infinite; 30} 31 32@keyframes letters { 33 from { 34 width: 0; 35 } 36 37 to { 38 width: 100%; 39 } 40} 41 42@keyframes cursor { 43 from { 44 border-color: transparent 45 } 46 47 50% { 48 border-color: #6019bd 49 } 50}
Variation of abutton
Variation of abutton