Gulafsan Shaheen
Published in : 2022-03-01

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

HTML & CSS

I want my buttons to give an engraved look using CSS style sheet. I've googled a bit but didn't find anything relevent.

What CSS I would need to use to applyDropShadow effects to the button?

Comments

Rakshit Date : 2022-03-01

Best answers

34

Best answers

34

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.

Gulafsan Shaheen Date : 2022-03-01

Thanks a lot! :) 

Shilpa Date : 2022-03-01

Best answers

10

Best answers

10

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.

Gulafsan Shaheen Date : 2022-03-01

Thanks a bunch! 

Shilpa Date : 2022-03-01

Your welcome!

Leave a comment

Join us

Join our community and get the chance to solve your code issues & share your opinion with us

Sign up Now

Related posts

Flex Box last column break to the next row
Publish date: 2022-02-10 | Comments: 1

Tag: HTML & CSS

Invalid CSS after : expected expression was - SASS error
Publish date: 2022-02-13 | Comments: 1

Tag: HTML & CSS

What is the need for using (for) attr in the label of an input tag?
Publish date: 2022-02-11 | Comments: 2

Tag: HTML & CSS

How to separate the background into three divs that can be flipped?
Publish date: 2022-02-12 | Comments: 1

Tag: HTML & CSS

Searching for a better way to use abstracts in Dart SASS
Publish date: 2022-02-10 | Comments: 0

Tag: HTML & CSS

How to horizontally align to the centre a li inside an ul?
Publish date: 2022-03-04 | Comments: 2

Tag: HTML & CSS

Can't move the background-image code from CSS file to HTML file.
Publish date: 2022-02-13 | Comments: 2

Tag: HTML & CSS

Logo shrinks when resizing the browser
Publish date: 2022-02-10 | Comments: 2

Tag: HTML & CSS