HTML

CSS

JS

body {
	font-family: sans-serif;
	text-align: center;
	padding: 2rem;
	font-size: 1rem;
	line-height: 1.5;
	transition: all 725ms ease-in-out;
	color: tomato;
}

.press-button{
    background-color: #28a4c9;
    border-radius: .5em;
    box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.2),
                inset 0 2px 0 hsla(0,0%,100%,.1),
                inset 0 -0.2em 0 hsla(0,0%,100%,.1),
                inset 0 -0.25em 0 hsla(0,0%,0%,.25),
                0 0.25em 0.25em hsla(0,0%,0%,.05);
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-family: sans-serif;
    font-size: 1em;
    font-weight: bold;
    line-height: 1.5;
    margin: 0 .5em 1em;
    padding: 1em 1.5em .75em;
    text-decoration: none;
}

.press-button:active {
    box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.2),
                inset 0 2px 0 hsla(0,0%,100%,.1),
                inset 0 0 0 3em hsla(0,0%,100%,.2),
                inset 0 0.25em 0.5em hsla(0,0%,0%,.05),
                0 -1px 1px hsla(0,0%,0%,.1),
                0 1px 1px hsla(0,0%,100%,.25);
    margin-top: .25em;
    outline: none;
    padding-bottom: .5em;
}

3D Clickable Button with CSS3

This is a CSS 3 only 3D button. The 3D effect is created using box-shadow property. When it is clicked, .press-button:active, it also uses box-shadow to reduce the bottom shadow to create the illusion of the button being pressed.

This button is ideal for web pages with any workflow that submits an API request to the backend to fetch data without refreshing the page, such as SPA. You can further customize this button by changing the font, color, and padding to create a slightly different look and feel.