/* HTML */ <a href="#"><button class="button-23">Button</button></a> /* CSS */ .button-23 { align-items: center; justify-content: center; outline: none; cursor: pointer; width: 150px; height: 50px; background-image: linear-gradient(to top, #D8D9DB 0%, #fff 80%, #FDFDFD 100%); border-radius: 30px; border: 1px solid #8F9092; transition: all 0.2s ease; font-family: "Source Sans Pro", sans-serif; font-size: 14px; font-weight: 600; color: #606060; text-shadow: 0 1px #fff; } .button-23:hover { box-shadow: 0 4px 3px 1px #FCFCFC, 0 6px 8px #D6D7D9, 0 -4px 4px #CECFD1, 0 -6px 4px #FEFEFE, inset 0 0 3px 3px #CECFD1; } .button-23:active { box-shadow: 0 4px 3px 1px #FCFCFC, 0 6px 8px #D6D7D9, 0 -4px 4px #CECFD1, 0 -6px 4px #FEFEFE, inset 0 0 5px 3px #999, inset 0 0 30px #aaa; } .button-23:focus { box-shadow: 0 4px 3px 1px #FCFCFC, 0 6px 8px #D6D7D9, 0 -4px 4px #CECFD1, 0 -6px 4px #FEFEFE, inset 0 0 5px 3px #999, inset 0 0 30px #aaa; }
0 Comments