Button by DGtalsam
#e8e8e8
1.custom-btn { 2 width: 130px; 3 height: 40px; 4 color: #fff; 5 border-radius: 5px; 6 padding: 10px 25px; 7 font-family: 'Lato', sans-serif; 8 font-weight: 500; 9 background: transparent; 10 cursor: pointer; 11 transition: all 0.3s ease; 12 position: relative; 13 display: inline-block; 14 box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5), 15 7px 7px 20px 0px rgba(0, 0, 0, .1), 16 4px 4px 5px 0px rgba(0, 0, 0, .1); 17 outline: none; 18} 19 20.btn { 21 background: linear-gradient(0deg, rgba(255, 151, 0, 1) 0%, rgba(251, 75, 2, 1) 100%); 22 line-height: 42px; 23 padding: 0; 24 border: none; 25} 26 27.btn span { 28 position: relative; 29 display: block; 30 width: 100%; 31 height: 100%; 32} 33 34.btn:before, 35.btn:after { 36 position: absolute; 37 content: ""; 38 right: 0; 39 bottom: 0; 40 background: rgba(251, 75, 2, 1); 41 box-shadow: -7px -7px 20px 0px rgba(255, 255, 255, .9), 42 -4px -4px 5px 0px rgba(255, 255, 255, .9), 43 7px 7px 20px 0px rgba(0, 0, 0, .2), 44 4px 4px 5px 0px rgba(0, 0, 0, .3); 45 transition: all 0.3s ease; 46} 47 48.btn:before { 49 height: 0%; 50 width: 2px; 51} 52 53.btn:after { 54 width: 0%; 55 height: 2px; 56} 57 58.btn:hover { 59 color: rgba(251, 75, 2, 1); 60 background: transparent; 61} 62 63.btn:hover:before { 64 height: 100%; 65} 66 67.btn:hover:after { 68 width: 100%; 69} 70 71.btn span:before, 72.btn span:after { 73 position: absolute; 74 content: ""; 75 left: 0; 76 top: 0; 77 background: rgba(251, 75, 2, 1); 78 box-shadow: -7px -7px 20px 0px rgba(255, 255, 255, .9), 79 -4px -4px 5px 0px rgba(255, 255, 255, .9), 80 7px 7px 20px 0px rgba(0, 0, 0, .2), 81 4px 4px 5px 0px rgba(0, 0, 0, .3); 82 transition: all 0.3s ease; 83} 84 85.btn span:before { 86 width: 2px; 87 height: 0%; 88} 89 90.btn span:after { 91 height: 2px; 92 width: 0%; 93} 94 95.btn span:hover:before { 96 height: 100%; 97} 98 99.btn span:hover:after { 100 width: 100%; 101}
1.8K views
1.8K views
MIT License