Interactive Button

Propel-Isabella
Tourist
9 0 1

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?

 

PropelIsabella_0-1715743565260.png

 

Replies 4 (4)

Arif_Shopidevs
Shopify Partner
133 18 13

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

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers
Propel-Isabella
Tourist
9 0 1

Hi there, 

 

Thanks so much! 

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

 

Golden Ticket (7).png

Arif_Shopidevs
Shopify Partner
133 18 13

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

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers
Arif_Shopidevs
Shopify Partner
133 18 13

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

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers