Button by aadium
#212121
1.morph-button { 2 display: relative; 3 background-color: #66DA43; 4 color: #66DA43; 5 width: 85px; 6 height: 40px; 7 border: 2px solid transparent; 8 cursor: pointer; 9 transition: all 0.3s ease-in-out; 10} 11 12.morph-button:hover { 13 transform: scale(1.5); 14} 15 16.morph-button:active { 17 transform: scale(0.8); 18 background-color: #212121; 19 border: 2px solid #66DA43; 20} 21 22.morph-button:before { 23 content: "Twist"; 24 display: block; 25 position: absolute; 26 margin-top: -22px; 27 margin-left: -2px; 28 padding: 12px 25px; 29 transform-origin: center; 30 transition: transform 0.3s ease-in-out; 31 z-index: 1; 32 background-color: #212121; 33 border: 2px solid #66DA43; 34} 35 36.morph-button:hover:before { 37 transform: rotate(45deg) scale(1.2); 38} 39
509 views
509 views
MIT License