Button by nimsay06
#e8e8e8
1.button { 2 height: 4em; 3 width: 12em; 4 border-radius: 18px; 5 border: 4px solid lightskyblue; 6 padding: 0.2em; 7 overflow: hidden; 8} 9 10.text { 11 display: block; 12 font-size: 20px; 13 color: lightskyblue; 14} 15 16.afterText { 17 display: none; 18} 19 20.clouds { 21 display: none; 22 height: 4rem; 23 width: 8rem; 24} 25 26.button:hover { 27 cursor: pointer; 28} 29 30.button:hover .text { 31 text-decoration: underline; 32 font-weight: bold; 33} 34 35.button:focus { 36 transition: ease-in 200ms; 37 background-color: lightskyblue; 38 border: none; 39} 40 41.button:focus .text { 42 display: none; 43} 44 45.button:focus .afterText { 46 animation: hoverMovement 1s ease-in alternate infinite; 47 display: block; 48 font-size: 25px; 49 letter-spacing: 5px; 50 color: rgb(90, 94, 97); 51} 52 53.button:focus .clouds { 54 display: block; 55 animation: cloudMovement ease-in-out 3s infinite; 56 margin-top: -1.5em; 57} 58 59@keyframes hoverMovement { 60 from { 61 transform: translateY(0em); 62 } 63 64 to { 65 transform: translateY(-0.1em); 66 } 67} 68 69@keyframes cloudMovement { 70 from { 71 transform: translateX(-5em); 72 } 73 74 to { 75 transform: translateX(10em); 76 } 77}
249 views
Variation of abutton
MIT License