I am looking to accomplish the following
- Text and svg elements should move when hovered over
- Color should be reversed on hover.
- Link should be opened
This is the HTML code I have:
<div class="btn_ol">
<a href="http://google.com/" target="_blank"></a>
<span>Google<object class=ol_svg data="../assets/images/common/icon_ol.svg" type="image/svg+xml"></object></span>
</div>
This is my CSS styling:
.btn_ol {
padding: 2.3rem 1.8rem;
border: 2px solid #0c5a9d;
cursor: pointer;
width: 604px;
display: block;
margin: 35px auto;
outline: none;
vertical-align: middle;
text-align: center;
position: relative;
overflow: hidden;
background-color: transparent;
color: #0c5a9d;
transition: background-color 300ms ease-out;
z-index: 1;
}
.btn_ol:hover {
background: #0c5a9d;
border-color: #0c5a9d;
color: #fff;
}
.btn_ol a{
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
}
.btn_ol span {
display: inline-block;
position: relative;
font-size: 1.8rem;
margin: 0 auto;
transition: all 300ms ease-out;
will-change: transform;
font-weight: bold;
}
.btn_ol:hover span {
transform: translate3d(-1rem, 0, 0);
}
.btn_ol .ol_svg {
position: absolute;
margin: auto 5px;
top: 25%;
width: 1.1em;
right: -0.5rem;
opacity: 0;
transition: all 300ms ease-out;
will-change: right;
}
.btn_ol .ol_svg * {
stroke-width: 5;
}
.btn_ol:hover .ol_svg {
opacity: 1;
right: -3.5rem;
}
@media screen and (max-width: 720px) {
.btn_ol {
width: 100%;
padding: 2.3rem 1.1rem;
margin: 20px auto;
}
.btn_ol span {
line-height: 1.8rem;
font-size: 1.4rem;
}
.btn_ol .ol_svg {
top: 15%;
right: 0rem;
}
.btn_ol:hover .ol_svg {
right: -2.5rem;
}
}
In this CSS, our goal is to achieve the following: - Text and svg elements should move when hovered over - Color should be reversed on hover. - Link should be opened
While everything worked fine on desktop, I encountered an issue with the mobile site operation.
When using a tablet, it takes two taps to follow the link. The first tap triggers hover state and the second tap opens the window.
It seems that removing
.btn_ol:hover .ol_svg {
opacity: 1;
}
would allow the link to open on the first tap, but I'm unsure how to maintain the SVG view in this scenario.
Please assist me :)