Button by gharsh11032000
#212121
1.button { 2 position: relative; 3 text-decoration: none; 4 color: #e8e8e8; 5 padding: 15px 30px; 6 width: 170px; 7 height: 60px; 8 font-weight: 600; 9 font-size: 18px; 10 cursor: pointer; 11 border: none; 12 overflow: hidden; 13 background: linear-gradient(-45deg, #f89b29 0%, #ff0f7b 100% ); 14 transition: all 0.3s cubic-bezier(0.215, 0.610, 0.355, 1); 15} 16 17.button span , .button span::before { 18 position: absolute; 19 top: 0%; 20 left: 0; 21 width: 100%; 22 height: 100%; 23 display: flex; 24 align-items: center; 25 pointer-events: none; 26 justify-content: center; 27 transition: all 0.3s cubic-bezier(0.215, 0.610, 0.355, 1); 28} 29 30.button span::before { 31 content: 'Hello!'; 32 top: -100%; 33} 34 35.button:before { 36 top: 0; 37 left: 0; 38 border-top: 2px solid #e8e8e8; 39 border-left: 2px solid #e8e8e8; 40} 41 42.button:after { 43 bottom: 0; 44 right: 0; 45 border-bottom: 2px solid #e8e8e8; 46 border-right: 2px solid #e8e8e8; 47} 48 49.button:after, 50.button:before { 51 content: ""; 52 position: absolute; 53 width: 24px; 54 height: 24px; 55 pointer-events: none; 56 transition: all 0.3s cubic-bezier(0.215, 0.610, 0.355, 1); 57} 58 59.button:hover { 60 box-shadow: 0 0 30px rgba(248 ,155, 41,0.4), 61 0 0 30px rgba(255, 15, 123,0.4); 62 ; 63} 64 65.button:hover:before, 66.button:hover:after { 67 width: 100%; 68 height: 100%; 69} 70 71.button:hover span { 72 top: 100%; 73} 74 75.button:active { 76 scale: 0.95; 77 box-shadow: 0 0 10px rgba(248 ,155, 41,0.4), 78 0 0 10px rgba(255, 15, 123,0.4); 79 ; 80} 81 82
739 views
739 views
MIT License