Skip to content

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

🚀 Feature Request: Split the button's shadow for normal and hover states #4859

Closed
parfilov opened this issue Jun 25, 2018 · 20 comments · Fixed by #30193
Closed

🚀 Feature Request: Split the button's shadow for normal and hover states #4859

parfilov opened this issue Jun 25, 2018 · 20 comments · Fixed by #30193
Labels
mod/r* [Temp.] For internal use only. mod/vf* [Temp.] For internal use only. mod* [Temp.] For internal use only. request/enhancement Indicates an Enhancement Request for an existing feature. request/migrated Indicates when a Feature Request is migrated to the Feature Request Discussion category. solved-by/atomic-elements Indicates that an Issue or Feature Request will be solved by introduction of an Atomic Element. solved-by/pseudo-classes Indicates that an Issue or Feature Request will be solved by the new pseudo-classes feature. solved-by/v4 Indicates that an Issue or Feature Request will be solved with the release of Elementor v4. type/interactions Indicates when a topic is related to user interactions on the frontend. type/styles Indicates when a topic is related to the styles or design of a component. widget/button References the Button widget. widget/settings References any widget’s settings.

Comments

@parfilov
Copy link

Hello!
There is a Button widget box shadow on Styles tab, but we can only set the overall shadow now.
Please make an opportunity to set shadow for normal and hover states apart.

Now I need to write custom CSS like:

selector .elementor-button:hover {
-webkit-box-shadow: 0 0 12px 0 rgba(0,0,0,0.12);
box-shadow: 0 0 50px 0 rgba(0,0,0,0.12);
}

Thanks!
@black-eye
Copy link

+1

@bainternet bainternet added the request/enhancement Indicates an Enhancement Request for an existing feature. label Jul 1, 2018
@chrolm
Copy link

chrolm commented Jul 2, 2018

+1

1 similar comment
@bentalgad
Copy link

+1

@brian-curtis
Copy link

+1

Was wondering why when I set a hover state box shadow on a button it added the same to the normal state...

@abdulhamidalsalman
Copy link

+1

@DmitriyDSWEB
Copy link

+1 often need add other shadow, normal, hover and active, when press button, off shadow, or change size button

@bentalgad
Copy link

+1 This is a must.

@zimmiel
Copy link

zimmiel commented Mar 19, 2019

+1

1 similar comment
@wildmercury
Copy link

+1

@soulfulwater
Copy link

This would be awesome.

@craig-tanaka
Copy link

Please get this on images also.

@3rinyes
Copy link

3rinyes commented Jun 24, 2020

Yes! +1

@LitePenguins
Copy link

Is there an update on this?

@thehervy
Copy link

thehervy commented Oct 9, 2020

+100000 this should be standard now.

I think in the next major release the elementor team should revise all components and try to make it as flexible as possible. This issue is one great example. Buttons should be able to "gain" shadow when hover - standard UX pattern, but we cannot do that without additional CSS... Please add it there in general.

@elfilalime
Copy link

+1

@cloudhal
Copy link

+1 common please, this is standard stuff.

@lindsayj23
Copy link

Has anyone figured out how to get this working without writing css for each instance?

@alexander-pankart
Copy link

Any updates on that?

@nicholaszein nicholaszein added the mod/r* [Temp.] For internal use only. label Jun 3, 2024
@rvisima
Copy link

rvisima commented Jan 8, 2025

Seven years and still not implemented? This is such a basic thing, already implemented in other elements (like containers). Why can't we have it for buttons?

@parfilov
Copy link
Author

parfilov commented Jan 9, 2025

Seven years and still not implemented? This is such a basic thing, already implemented in other elements (like containers). Why can't we have it for buttons?

Because the team is working on "more important things": hosting, ai, image optimizer, email marketing. Hover shadows don't make money.

@rami-elementor rami-elementor mentioned this issue Feb 9, 2025
Merged
@nicholaszein nicholaszein added type/styles Indicates when a topic is related to the styles or design of a component. widget/button References the Button widget. solved-by/atomic-elements Indicates that an Issue or Feature Request will be solved by introduction of an Atomic Element. widget/settings References any widget’s settings. solved-by/v4 Indicates that an Issue or Feature Request will be solved with the release of Elementor v4. solved-by/pseudo-classes Indicates that an Issue or Feature Request will be solved by the new pseudo-classes feature. mod* [Temp.] For internal use only. labels Feb 10, 2025
@nicholaszein nicholaszein added mod/m* [Temp.] For internal use only. mod/vf* [Temp.] For internal use only. labels Feb 10, 2025
@nicholaszein nicholaszein changed the title Split the button's shadow for normal and hover states 🚀 Feature Request: Split the button's shadow for normal and hover states Feb 10, 2025
@nicholaszein nicholaszein marked this as a duplicate of #17237 Feb 11, 2025
@nicholaszein nicholaszein mentioned this issue Feb 11, 2025
Closed
@nicholaszein nicholaszein added type/interactions Indicates when a topic is related to user interactions on the frontend. request/migrated Indicates when a Feature Request is migrated to the Feature Request Discussion category. and removed mod/m* [Temp.] For internal use only. labels Feb 11, 2025
@elementor elementor locked and limited conversation to collaborators Feb 11, 2025
@nicholaszein nicholaszein converted this issue into discussion #30210 Feb 11, 2025

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

Assignees
No one assigned
Labels
mod/r* [Temp.] For internal use only. mod/vf* [Temp.] For internal use only. mod* [Temp.] For internal use only. request/enhancement Indicates an Enhancement Request for an existing feature. request/migrated Indicates when a Feature Request is migrated to the Feature Request Discussion category. solved-by/atomic-elements Indicates that an Issue or Feature Request will be solved by introduction of an Atomic Element. solved-by/pseudo-classes Indicates that an Issue or Feature Request will be solved by the new pseudo-classes feature. solved-by/v4 Indicates that an Issue or Feature Request will be solved with the release of Elementor v4. type/interactions Indicates when a topic is related to user interactions on the frontend. type/styles Indicates when a topic is related to the styles or design of a component. widget/button References the Button widget. widget/settings References any widget’s settings.
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Tweak: Add the ability to override hover box shadow on Button widget [ED-18166] elementor/elementor