Interactive Button

[Propel-Isabella]

Hi there,

Just wanted to know if it was possible to get interactive button like these in shopify basic? https://www.sliderrevolution.com/resources/css-button-hover-effects/

We have a giveaway happening soonish and I wanted to know if I could have a clickable photo? or even if it moves a little. 

Would anyone know how I could achieve this?

[Arif_Shopidevs]

Hello, That is possible by set the background or before after position , can you share your site and the button image. We will try to help you.
thank you

[Propel-Isabella]

Hi there, 

Thanks so much! 

There is our website https://propelindustries.co.nz/

[Arif_Shopidevs]

Hello, 
You can add the image inside a tag something like 

<a href="/pages/flush-demos" class="">
<img src="https://community.shopify.com/c/image/serverpage/image-id/453180i9F941DE53903456F/image-size/large?v=v2&amp;px=100" width="100" height="50" data--h-bstatus="5PROCESSED"></a>

Because a tag is clickable,  secondly like which button you want , if you select one then we cant ry to help you.
thank you

[Arif_Shopidevs]

Hi, I have made a small button for you with image 

<style>a.effect{
    background-color: #541388;}
.effect.effect-5:hover:before {
    transform: scale(1, 1);
    text-indent: 0;
}
.effect.effect-5:before {
    content: "";
    font-family: FontAwesome;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0px;
    height: 100%;
    width: 30px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 0 50% 50% 0;
    transform: scale(0, 1);
    transform-origin: left center;
    transition: all 0.2s linear 0s;
}
.effect {
    text-align: center;
    display: inline-block;
    position: relative;
    text-decoration: none;
    color: #fff;
    text-transform: capitalize;
    font-family: "Roboto", sans-serif;
    font-size: 18px;
    padding: 20px 0px;
    width: 150px;
    border-radius: 6px;
    overflow: hidden;
}
            .effect.effect-5 {
    transition: all 0.2s linear 0s;
}
        </style>

, which will show effect on hove like one of the example

thank you