How can I change button hover animation in Dawn 12.0?

[Vari41]

Hello,

im having trouble with changing hover animation effect on buttons on my website www.shmrnc.cz (pass: linh). 

Do you guys please have any idea how to change the hover animations to have the similar/effect as is on this website www.dmp.cz (or at least to change colors+border without the current effect of making the border thicker)? 

Thank you very much!! 

[Made4uo-Ribe]

Hi @Vari41 

Your website cannot be reach. Can you share the preview? Thanks!

[Vari41]

The website should be opened now without required password, however i recorded my screen -> the first website is mine (www.shmrnc.cz), the second is someone elses (www.dmp.cz) to show what effect i would prefer. 

[Made4uo-Ribe]

Thanks for the info,

This is least I  can do. I cant see the animation of the example buttons that you provide. But it can be done exaxtly with the developer. Let us know. For the mean time check the design below. 

• From your Shopify admin dashboard, click on "Online Store" and then "Themes".
• Find the theme that you want to edit and click on "Actions" and then "Edit code".
• In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.button, button.button--primary {
    border: 2px solid #ffb6c1;
    text-transform: none;
    letter-spacing: .1em;
    -webkit-transition: all .75s;
    -moz-transition: all .75s;
    transition: all .75s;
    overflow: hidden;
    z-index: 0;
}
.button:hover {
    color: black;
    border: 2px solid red;
    background: pink;
    opacity: .7;
}
.button:after {
    content: "";
    position: absolute;
    z-index: -1;.button, button.button--primary {
    border: 2px solid #ffb6c1;
    text-transform: none;
    letter-spacing: .1em;
    -webkit-transition: all .75s;
    -moz-transition: all .75s;
    transition: all .75s;
    overflow: hidden;
    z-index: 0;
}

• And Save. 
• result:
• 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!