would like to adde animation button and an icon — dawn theme v 10.0.0

Store Design

Topic summary

A user is attempting to add animation effects to buttons and icons in their Dawn theme (version 10.0.0) Shopify store.

Proposed Solution:

  • Another participant suggests adding custom CSS code to the base.css file (located in Themes → Edit Code → Assets)
  • The CSS targets .button.button--secondary elements with:
    • White text color and border
    • Box shadow effects for depth
    • Hover state with cubic-bezier transition animation (500ms)
    • Shadow adjustments on hover for interactive feedback

Current Status:

  • The discussion remains open
  • A third user has requested the store URL to provide more specific assistance
  • No confirmation yet on whether the proposed CSS solution was implemented or successful
Summarized with AI on November 18. AI used: claude-sonnet-4-5-20250929.
1

heres a preview snippet of what i am tryinghttps://youtu.be/khDTfAwfohw

2

HI @tonikki

You can try follow this path:
Themes => edit code => asset => base.css
and add this code to bottom of the file base.css

.button.button--secondary{
  color: rgb(255, 255, 255);
  border-color: rgb(255, 255, 255);
  box-shadow: #fff 0px 0px 0px 0px inset;
  transition: all 500ms cubic-bezier(0.39,0.5,0.15,1.36);
}
.button.button--secondary:hover{
  box-shadow: #fff 0 0 0px 100px inset;
  color: #000;
}
3

@tonikki

Please share your store URL!

Thanks!