.custom-btn { width: 130px; height: 40px; color: #4c4f69; border-radius: 5px; padding: 10px 25px; font-weight: 500; background: transparent; cursor: pointer; transition: all 0.3s ease; position: relative; display: inline-block; box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5), 7px 7px 20px 0px rgba(0, 0, 0, .1), 4px 4px 5px 0px rgba(0, 0, 0, .1); outline: none; font-size: large; } /* 8 */ .btn-1 { background-color: #c6d0f5; background-image: linear-gradient(315deg, #c6d0f5 0%, #fab387 74%); line-height: 42px; padding: 0; border: none; } .btn-1 span { position: relative; display: block; width: 100%; height: 100%; } .btn-1:before, .btn-1:after { position: absolute; content: ""; right: 0; bottom: 0; background: #fab387; /*box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5), -4px -4px 6px 0 rgba(116, 125, 136, .2), inset -4px -4px 6px 0 rgba(255,255,255,.5), inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/ transition: all 0.3s ease; } .btn-1:before { height: 0%; width: 2px; } .btn-1:after { width: 0%; height: 2px; } .btn-1:hover:before { height: 100%; } .btn-1:hover:after { width: 100%; } .btn-1:hover { background: transparent; } .btn-1 span:hover { color: #fab387; } .btn-1 span:before, .btn-1 span:after { position: absolute; content: ""; left: 0; top: 0; background: #fab387; /*box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5), -4px -4px 6px 0 rgba(116, 125, 136, .2), inset -4px -4px 6px 0 rgba(255,255,255,.5), inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/ transition: all 0.3s ease; } .btn-1 span:before { width: 2px; height: 0%; } .btn-1 span:after { height: 2px; width: 0%; } .btn-1 span:hover:before { height: 100%; } .btn-1 span:hover:after { width: 100%; }