5K views
CSSAdd prefixes
1button { 2 outline: 0; 3 border: 0; 4 display: flex; 5 flex-direction: column; 6 width: 100%; 7 max-width: 140px; 8 height: 50px; 9 border-radius: 0.5em; 10 box-shadow: 0 0.625em 1em 0 rgba(30, 143, 255, 0.35); 11 overflow: hidden; 12} 13 14button div { 15 transform: translateY(0px); 16 width: 100%; 17} 18 19button, 20button div { 21 transition: 0.6s cubic-bezier(.16,1,.3,1); 22} 23 24button div span { 25 display: flex; 26 align-items: center; 27 justify-content: space-between; 28 height: 50px; 29 padding: 0.75em 1.125em; 30} 31 32button div:nth-child(1) { 33 background-color: #1e90ff; 34} 35 36button div:nth-child(2) { 37 background-color: #21dc62; 38} 39 40button:hover { 41 box-shadow: 0 0.625em 1em 0 rgba(33, 220, 98, 0.35); 42} 43 44button:hover div { 45 transform: translateY(-50px); 46} 47 48button p { 49 font-size: 17px; 50 font-weight: bold; 51 color: #ffffff; 52} 53 54button:active { 55 transform: scale(0.95); 56}
HTML
1<button> 2 <div> 3 <span> 4 <p>Hover Me</p><p>:)</p> 5 </span> 6 </div> 7 <div> 8 <span> 9 <p>Thanks</p><p>:D</p> 10 </span> 11 </div> 12</button>