Button by gharsh11032000
#212121
1.button { 2 position: relative; 3 background-color: #333; 4 color: #e8e8e8; 5 font-size: 17px; 6 font-weight: 600; 7 width: 150px; 8 height: 60px; 9 border-radius: 50em; 10 border: none; 11 cursor: pointer; 12 text-transform: uppercase; 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 border-radius: 50em; 27 background: linear-gradient(135deg,#7b4397,#dc2430 ); 28 transform: translate(-100%, 0%); 29 transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1); 30} 31 32.button::after { 33 content: "Hover me"; 34 display: flex; 35 align-items: center; 36 justify-content: center; 37 background-color: transparent; 38 width: 100%; 39 height: 100%; 40 pointer-events: none; 41 border-radius: 50em; 42 transform: translate(0%,-100%); 43 transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1); 44} 45 46.button:hover::before { 47 transform: translate(0%, 0%); 48} 49 50.button:hover::after { 51 transform: translate(100%,-100%); 52} 53 54.button:focus { 55 outline: none; 56} 57 58.button:active { 59 scale: 0.95; 60} 61 62 63
674 views
674 views
MIT License