Gulafsan Shaheen
Published in : 2022-03-01
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?
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;
}
Hope it will be helpful for you.
Gulafsan Shaheen Date : 2022-03-01
Thanks a bunch!
Shilpa Date : 2022-03-01
Your welcome!
Join our community and get the chance to solve your code issues & share your opinion with us
Sign up Now