How can I add engraved style to my buttons using CSS?

All you need is Box-Shadow css property. You can create CSS dynamically by setting up left/right shadow, top/bottom shadow, spread, blur and opacity.

-webkit-box-shadow: 9px 10px 10px 11px rgba(0,0,0,0.65); box-shadow: 9px 10px 10px 11px rgba(0,0,0,0.65);

After adding the above css to your button, it will look something like this, You can adjust the arguments given in the css classes in your accordance!

In addition,

If you want to engrave text over the button, you can use style sheets added in this thread.

Hope you get your solution with this trick.

You can add button effects using box-shadow CSS. You can see an example here.

Here I added CSS file and the HTML code to demonstrate box-shadow property in css.

box-shadow: [inset?] [top] [left] [blur] [size] [color];

Here is HTML code,

<div > <h1><code>box-shadow</code> Effect</h1> <button >Pulse</button> <button >Close</button> <button >Slide</button> <button >Fill In</button> <button >Fill Up</button> <button >Raise</button> <button >Offset</button></div>

Here is CSS code,

/* box-shadow: [inset?] [top] [left] [blur] [size] [color]*/ .fill:hover, .fill:focus { box-shadow: inset 0 0 0 2em var(--hover);} .pulse:hover, .pulse:focus { animation: pulse 1s; box-shadow: 0 0 0 2em rgba(255, 255, 255, 0);} @keyframes pulse { 0% { box-shadow: 0 0 0 0 var(--hover);}} .close:hover, .close:focus { box-shadow: inset -3.5em 0 0 0 var(--hover), inset 3.5em 0 0 0 var(--hover);} .raise:hover, .raise:focus { box-shadow: 0 0.5em 0.5em -0.4em var(--hover); transform: translateY(-0.25em);} .up:hover, .up:focus { box-shadow: inset 0 -3.25em 0 0 var(--hover);} .slide:hover, .slide:focus { box-shadow: inset 6.5em 0 0 0 var(--hover);} .offset { box-shadow: 0.3em 0.3em 0 0 var(--color), inset 0.3em 0.3em 0 0 var(--color);} .offset:hover, .offset:focus { box-shadow: 0 0 0 0 var(--hover), inset 6em 3.5em 0 0 var(--hover);} .fill { --color: #a972cb; --hover: #cb72aa;} .pulse { --color: #ef6eae; --hover: #ef8f6e;} .close { --color: #ff7f82; --hover: #ffdc7f;} .raise { --color: #ffa260; --hover: #e5ff60;} .up { --color: #e4cb58; --hover: #94e458;} .slide { --color: #8fc866; --hover: #66c887;} .offset { --color: #19bc8b; --hover: #1973bc;} button { color: var(--color); transition: 0.25s;} button:hover, button:focus { border-color: var(--hover); color: #fff;} body { color: #fff; background: #17181c; font: 300 1em 'Fira Sans', sans-serif; justify-content: center; align-content: center; align-items: center; text-align: center; min-height: 100vh; display: flex;} button { background: none; border: 2px solid; font: inherit; line-height: 1; margin: 0.5em; padding: 1em 2em;} h1 { font-weight: 400;} code { color: #e4cb58; font: inherit;} 

Live demo

Hope it will be helpful for you.