Button by gharsh11032000
#212121
1.animated-button { 2 position: relative; 3 display: inline-block; 4 padding: 16px 32px; 5 border: none; 6 background-color: #2196F3; 7 color: #fff; 8 font-size: 16px; 9 text-transform: uppercase; 10 font-weight: 600; 11 cursor: pointer; 12 border-radius: 8px; 13 overflow: hidden; 14 transition: all 0.8s cubic-bezier(0.23, 1, 0.320, 1); 15} 16 17.animated-button:before { 18 content: ""; 19 position: absolute; 20 top: 50%; 21 left: 50%; 22 transform: translate(-50%, -50%); 23 width: 120%; 24 height: 120%; 25 background-color: #fff; 26 opacity: 0; 27 transition: all 0.8s cubic-bezier(0.23, 1, 0.320, 1); 28} 29 30.animated-button span { 31 position: relative; 32 z-index: 1; 33} 34 35.animated-button:hover { 36 color: #2196F3; 37 background-color: #fff; 38 box-shadow: 0 0 20px hsla(263, 77%, 31%, 0); 39} 40 41.animated-button:active { 42 scale: 0.9; 43} 44 45.animated-button:hover:before { 46 transform: translate(-50%, -50%) rotate(45deg); 47 opacity: 1; 48} 49 50 51 52 53
678 views
678 views
MIT License