Return to previous page

Floating button - by Pawel - on WordPress WooCommerce support

This topic has 8 replies, 3 voices, and was last updated 5 years, 2 months ago ago by Rose Tyler

Pawel

Participant

February 12, 2019 at 13:05

Hello, I want to make an floating icon just like back to top icon in theme. It would like a copy of existing button but with a phone icon instead and with added tooltip on hover, just above backtotop. I have tried useing back-to-top css classes but something is wrong. There is a link but on click site is going up, not to linked page (link is showed by chrome but not working). Maybe can You tell me how can I modify existing classes to make it properly?

#209027 Copied Theme version: 5.1.6

7 Answers

Olga Barlow

Support staff

February 12, 2019 at 15:53

Hello,

Scroll to top works with the script. Did you also use the script? What element did you use to add that button? Could you provide temporary Dashboard access to check the code and element that you used to add the button and then we’ll be able to find what was made wrong?

Regards

#209058 Copied

Pawel

Participant

February 12, 2019 at 16:17

For the start I’ve added simple html to homepage, probably thats why it doesn’t work properly. It’s missing <div id="back-top">. This is html I’ve added:

<a style="position:fixed;bottom:70px;right:17px;line-height:12px;" class="back-top backIn" href="./kontakt"><img src="https://image.flaticon.com/icons/svg/9/9243.svg" height="14px" width="14px"></a>

Certainly ther’s better way to do it. Maybe adding it by function?
(img link is temporary to test how it works, better if it would be fontawesome)

Please contact administrator
for this information.

#209065 Copied
Olga Barlow

Support staff

February 12, 2019 at 17:02
Hello,

I have moved that custom HTML to footer widgets area to show that button for all the pages
http://prntscr.com/mk4wzi And added the custom CSS to theme options
```
.custom-btn {
    position: fixed;
    bottom: 70px;
    right: 17px;
    line-height: 12px;
    visibility: visible;
    opacity: 1;
    z-index: 999;
    padding: 12px;
    border: 1px solid #e1e1e1;
    border-radius: 50%;
    background-color: #fff;
    cursor: pointer;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
```
Check now.

Regards
#209069 Copied
Pawel

Participant

February 13, 2019 at 11:21

At first it doesn’t work but after cache cleanup it’s ok 🙂 How can I add an animation to it? I want it to bounce from time to time. Albo how to add a small tooltip on hover? Just a few words.

Thanks!

#209130 Copied
Rose Tyler

Support staff

February 13, 2019 at 13:40
You can use code like this:
```
@keyframes custom-btn-bounce {
    0% {
        transform: translateX(0);
    }

    7% {
        transform: translateX(-10px)
    }

    14%, 100% {
        transform: translateX(0);
    }
}
.custom-btn {
    animation-duration: 3s;    
    animation-name: custom-btn-bounce;
    animation-iteration-count: infinite;
    animation-timing-function: ease;
    animation-play-state: running;
}
.custom-btn:hover {
    animation-play-state: paused;
}
.custom-btn::before {
    content: 'Contact us';
    position: absolute;
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.85);
    width: 100px;
    height: auto;
    top: -40px;
    right: -10px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    text-align: center;
    padding: 10px 5px;
    transition: .2s ease .05s;
    opacity: 0;
}
.custom-btn:hover::before {
    opacity: 1;
}
.back-top {
    z-index: 998;
}
```
Regards
#209147 Copied
Pawel

Participant

February 13, 2019 at 15:15

Thanks, I’ve made some changes in style and it’s perfect now 🙂

Have a nice day

#209160 Copied

Rose Tyler

Support staff

February 13, 2019 at 15:17

You’re welcome!

Regards

#209161 Copied
Viewing 8 results - 1 through 8 (of 8 total)