Button by fabiodevbr
#e8e8e8
1button { 2 background-color: #F2F7FA; 3 width: 100px; 4 height: 30px; 5 border: none; 6 border-radius: 10px; 7 font-weight: 600; 8 overflow: hidden; 9 transition-duration: 700ms; 10} 11 12button span:first-child { 13 color: #0E418F; 14 position: absolute; 15 transform: translate(-50%, -50%) 16} 17 18button span:last-child { 19 position: absolute; 20 color: #B5CCF3; 21 opacity: 0; 22 transform: translateY(100%) translateX(-50%); 23 height: 14px; 24 line-height: 13px; 25} 26 27button:focus { 28 background-color: #0E418F; 29 width: 120px; 30 height: 40px; 31 transition-delay: 100ms; 32 transition-duration: 500ms; 33} 34 35button:focus span:first-child { 36 color: #B5CCF3; 37 transform: translateX(-50%) translateY(-150%); 38 opacity: 0; 39 transition-duration: 500ms; 40} 41 42button:focus span:last-child { 43 transform: translateX(-50%) translateY(-50%); 44 opacity: 1; 45 transition-delay: 300ms; 46 transition-duration: 500ms; 47} 48 49button:focus:end { 50 background-color: #FFFFFF; 51 width: 120px; 52 height: 40px; 53 transition-duration: 900ms; 54} 55 56.centralize { 57 width: 100%; 58 height: 100%; 59 display: flex; 60 justify-content: center; 61 align-items: center; 62 text-align: center; 63} 64 65.description { 66 margin-top: 10px; 67 color: #B5CCF3; 68}
10K views
10K views
MIT License