Button by AqFox
#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 font-size: 15px; 19} 20 21.btn-4 { 22 background-color: #004dff; 23 background-image: linear-gradient(315deg, #03c8a8 0%, #004dff 74%); 24 line-height: 42px; 25 padding: 0; 26 border: none; 27} 28 29.btn-4:hover { 30 background-color: #004dff; 31 background-image: linear-gradient(315deg, #004dff 0%, #03c8a8 74%); 32} 33 34.btn-4 span { 35 position: relative; 36 display: block; 37 width: 100%; 38 height: 100%; 39} 40 41.btn-4:before, 42.btn-4:after { 43 position: absolute; 44 content: ""; 45 right: 0; 46 top: 0; 47 box-shadow: 4px 4px 6px 0 rgba(255,255,255,.9), 48 -4px -4px 6px 0 rgba(116, 125, 136, .2), 49 inset -4px -4px 6px 0 rgba(255,255,255,.9), 50 inset 4px 4px 6px 0 rgba(116, 125, 136, .3); 51 transition: all 0.3s ease; 52} 53 54.btn-4:before { 55 height: 0%; 56 width: .1px; 57} 58 59.btn-4:after { 60 width: 0%; 61 height: .1px; 62} 63 64.btn-4:hover:before { 65 height: 100%; 66} 67 68.btn-4:hover:after { 69 width: 100%; 70} 71 72.btn-4 span:before, 73.btn-4 span:after { 74 position: absolute; 75 content: ""; 76 left: 0; 77 bottom: 0; 78 box-shadow: 4px 4px 6px 0 rgba(255,255,255,.9), 79 -4px -4px 6px 0 rgba(116, 125, 136, .2), 80 inset -4px -4px 6px 0 rgba(255,255,255,.9), 81 inset 4px 4px 6px 0 rgba(116, 125, 136, .3); 82 transition: all 0.3s ease; 83} 84 85.btn-4 span:before { 86 width: .1px; 87 height: 0%; 88} 89 90.btn-4 span:after { 91 width: 0%; 92 height: .1px; 93} 94 95.btn-4 span:hover:before { 96 height: 100%; 97} 98 99.btn-4 span:hover:after { 100 width: 100%; 101}
990 views
990 views
MIT License