Well here is the CSS that is used to display this link button:
/* ### LINK, ZOOM AND VIDEO POPUP ICONS ### */
.sa_owl_theme .owl-item .sa_hover_container .sa_hover_buttons {
width:auto;
height:auto;
position:absolute;
border-radius:0px !important;
z-index:2;
cursor:pointer;
background:transparent !important;
}
.sa_owl_theme .owl-item .sa_hover_container .always_visible .sa_slide_link_icon,
.sa_owl_theme .owl-item .sa_hover_container:hover .sa_hover_buttons .sa_slide_link_icon {
display:block;
float:left;
width:40px;
height:40px;
}
.sa_owl_theme .owl-item .sa_hover_container:hover .sa_hover_buttons .sa_slide_link_icon:hover {
transition:background-color .3s ease-in-out, background-image .3s ease-in-out !important;
-webkit-transition:background-color .3s ease-in-out, background-image .3s ease-in-out !important;
-moz-transition:background-color .3s ease-in-out, background-image .3s ease-in-out !important;
-o-transition:background-color .3s ease-in-out, background-image .3s ease-in-out !important;
}
/* WHITE COLOR SCHEME */
.white .sa_owl_theme .owl-item .sa_hover_container .always_visible .sa_slide_link_icon,
.white .sa_owl_theme .owl-item .sa_hover_container:hover .sa_hover_buttons .sa_slide_link_icon {
background:rgba(0,0,0,0.3) url('../images/slide_link.png') no-repeat center center !important;
}
.white .sa_owl_theme .owl-item .sa_hover_container:hover .sa_hover_buttons .sa_slide_link_icon:hover {
background-color:rgba(0,0,0,0.8) !important;
}
/* BLACK COLOR SCHEME */
.black .sa_owl_theme .owl-item .sa_hover_container .always_visible .sa_slide_link_icon,
.black .sa_owl_theme .owl-item .sa_hover_container:hover .sa_hover_buttons .sa_slide_link_icon {
background:rgba(255,255,255,0.3) url('../images/black_slide_link.png') no-repeat center center !important;
}
.black .sa_owl_theme .owl-item .sa_hover_container:hover .sa_hover_buttons .sa_slide_link_icon:hover {
background-color:rgba(255,255,255,0.8) !important;
}
You can paste this code into your ‘style.css‘ file and edit for your requirements. You may have to use “!important” to override some of this CSS.
Thread Starter
lorre
(@lorre)
Hello Simon, thanks for the code! I’ve been trying, but I can’t seem to disable the animation effect of the button. Is it the ‘.3s ease-in-out’ code I need to change? If so, into what? Sorry, I’m new to this. Thank you.
Yes, you want to edit the 4 “transition” lines and change the timing from ‘.3s‘ (0.3 seconds) to ‘0s‘.
Thread Starter
lorre
(@lorre)
sorry, I tried, but it didn’t work. Can I somehow remove the whole effect, instead of adjusting the time of the effect?
Thread Starter
lorre
(@lorre)
hello again, I figured it out. I added this code and the issue was solved:
a:link {
-webkit-transition: width 1s;
transition: width 1s;
}
Hi, I’m glad you managed to get this resolved 😉
