Card by abhusha08
#e8e8e8
1.card { 2 display: flex; 3 flex-direction: column; 4 background: lightgrey; 5} 6 7.red-btn { 8 width: 300px; 9 height: 150px; 10 margin: 15px; 11 background: rgb(255, 0, 0); 12 background: rgb(131, 58, 180); 13 background: linear-gradient( 14 90deg, 15 rgba(131, 58, 180, 1) 0%, 16 rgba(253, 29, 29, 1) 50%, 17 rgba(252, 176, 69, 1) 100% 18 ); 19 color: white; 20 border: none; 21 border-radius: 0.625em; 22 font-size: 20px; 23 font-weight: bold; 24 cursor: pointer; 25 position: relative; 26 z-index: 1; 27 overflow: hidden; 28} 29.blue-btn { 30 width: 300px; 31 height: 150px; 32 margin: 15px; 33 background: rgb(0, 8, 144); 34 background: linear-gradient( 35 90deg, 36 rgba(0, 8, 144, 1) 0%, 37 rgba(16, 0, 255, 1) 22%, 38 rgba(86, 255, 247, 1) 100% 39 ); 40 color: white; 41 border: none; 42 border-radius: 0.625em; 43 font-size: 20px; 44 font-weight: bold; 45 cursor: pointer; 46 position: relative; 47 z-index: 1; 48 overflow: hidden; 49} 50 51button:hover { 52 color: rgb(0, 0, 0); 53} 54 55button:after { 56 content: ""; 57 background: white; 58 position: absolute; 59 z-index: -1; 60 left: -20%; 61 right: -20%; 62 top: 0; 63 bottom: 0; 64 transform: skewX(-45deg) scale(0, 1); 65 transition: all 0.5s; 66} 67 68button:hover:after { 69 transform: skewX(-45deg) scale(1, 1); 70 -webkit-transition: all 0.5s; 71 transition: all 0.5s; 72} 73
433 views
433 views
MIT License