1.9K views
1.button { 2 position: relative; 3 background-color: transparent; 4 color: #e8e8e8; 5 font-size: 17px; 6 font-weight: 600; 7 border-radius: 10px; 8 width: 150px; 9 height: 60px; 10 border: none; 11 text-transform: uppercase; 12 cursor: pointer; 13 overflow: hidden; 14 box-shadow: 0 10px 20px rgba(51, 51, 51, 0.2); 15 transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1); 16} 17 18.button::before { 19 content: "Hello!"; 20 display: flex; 21 align-items: center; 22 justify-content: center; 23 width: 100%; 24 height: 100%; 25 pointer-events: none; 26 background: linear-gradient(135deg,#7b4397,#dc2430 ); 27 transform: translate(0%,90%); 28 z-index: 99; 29 position: relative; 30 transform-origin: bottom; 31 transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1); 32} 33 34.button::after { 35 content: "Hover me"; 36 display: flex; 37 align-items: center; 38 justify-content: center; 39 background-color: #333; 40 width: 100%; 41 height: 100%; 42 pointer-events: none; 43 transform-origin: top; 44 transform: translate(0%,-100%); 45 transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1); 46} 47 48.button:hover::before { 49 transform: translate(0%,0%); 50} 51 52.button:hover::after { 53 transform: translate(0%,-200%); 54} 55 56.button:focus { 57 outline: none; 58} 59 60.button:active { 61 scale: 0.95; 62} 63 64 65