How can I overlay a rounded shadow to a text, inside a button?

Question

I would like to add a round-light glowing effect on a wide rectangular button, containing a certain text, on mouse over. I am trying to figure out how to use the box-shadow for this, but I think I should be able to achieve what I want by adding a "ghost" div inside the button, above the text (here it comes the overlay?) and I would then apply the box-shadow to this ghost div and not to the button itself (because I don't want the whole button borders getting shadowed, only a tiny dot in the middle of it). Applying a border-radius: 100% to the ghost div, will then provide a perfect rounded shadow. How can I manage these two elements (the text area and the ghost div) in overlay, inside my button? Thanks a lot!!

Here is my starting code:

HTML:

<button type="button" mat-flat-button>
  <div class="glow-fx"></div> <!-- The "ghost" div, responsible of the round glowing effect-->
  {{button.label}} <!-- The button text -->
</button>

CSS:

button {
    display:flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    width: 162px;
    height: 26px;
    color: black;
    background-color: #aa8b0f;
    border-radius: 20px;
}

button:hover {
    transition: 0.5s;
    background-color: #edc00a;
}

.glow-fx {
    width: 20px;
    height: 20px;
    border-radius: 100%;
}

It would help if you could mock up an image of what it should look like. — Alien426, Dec 23 '21 at 14:08
Would a pseudo element be useful here rather than adding a whole div to the HTML? — A Haworth, Dec 23 '21 at 14:12
What effect you need is not clear. Please share your look a like image effect? — Developer, Dec 23 '21 at 14:19
I think this is what you want for your button https://codepen.io/akash-yadav12/pen/BaLbgaB refer this pen for the box-shadow code, just reverse the hover effect — soraku02, Dec 23 '21 at 16:07
Also I have created this visual editor for box-shadow https://visual-editor-box-shadow.netlify.app/ — soraku02, Dec 23 '21 at 16:09

score 0 · Answer 1 · answered Dec 24 '21 at 06:48

0

using text-shadow on your button css file. choose the size and color what ever you want.

button:hover {
    transition: 0.5s;
    background-color: #edc00a;
    text-shadow: 1px 1px #0000ff;
}

answered Dec 24 '21 at 06:48

Sathiya

250
2
2

How can I overlay a rounded shadow to a text, inside a button?

1 Answers1