Button by KhaledMatalkah
#212121
1.realistic-button { 2 display: inline-block; 3 position: relative; 4 padding: 15px 30px; 5 font-size: 18px; 6 font-weight: bold; 7 text-transform: uppercase; 8 color: #fff; 9 background: linear-gradient(to bottom, #3498db, #2980b9); 10 border: 1px solid #2980b9; 11 border-radius: 5px; 12 box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1), inset 0px 2px 4px rgba(255, 255, 255, 0.2); 13 text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); 14 cursor: pointer; 15 overflow: hidden; 16 transition: background-color 0.3s, transform 0.3s; 17} 18 19.realistic-button::before, 20 .realistic-button::after { 21 content: ''; 22 position: absolute; 23 width: 100%; 24 height: 100%; 25 background: inherit; 26 z-index: -1; 27 transition: transform 0.3s; 28} 29 30.realistic-button::before { 31 top: 0; 32 left: -100%; 33 transform: skewX(-45deg); 34} 35 36.realistic-button::after { 37 bottom: 0; 38 right: -100%; 39 transform: skewX(45deg); 40} 41 42.realistic-button:hover { 43 background: linear-gradient(to bottom, #042b46, #0a525cd8); 44 transform: translateY(-2px); 45 box-shadow: 0px 6px 8px rgba(0, 195, 255, 0.2), inset 0px 2px 4px rgba(255, 255, 255, 0.1); 46} 47 48.realistic-button:hover::before { 49 transform: translateX(100%); 50} 51 52.realistic-button:hover::after { 53 transform: translateX(-100%); 54}
275 views
275 views
MIT License