I tried some hover effects from here and I tried to put the radial out effect on to a circle (border-radius: 50%) but there is a rectangle showing up for a brief moment when you actually hover over the circle.
my code:
button {
background: #F0F1F2;
border: none;
cursor: pointer;
border-radius: 50%;
width: 100px;
height: 100px;
}
.hvr-radial-out {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
overflow: hidden;
background: #e1e1e1;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-radial-out:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #2098D1;
border-radius: 100%;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-radial-out:hover, .hvr-radial-out:focus, .hvr-radial-out:active {
color: white;
}
.hvr-radial-out:hover:before, .hvr-radial-out:focus:before, .hvr-radial-out:active:before {
-webkit-transform: scale(2);
transform: scale(2);
}
<button class="hvr-radial-out">Test</button>
When click the button, there is a square border. I guess that you want to remove it. So add outline:0;
button {
background: #F0F1F2;
border: none;
cursor: pointer;
border-radius: 50%;
width: 100px;
height: 100px;
outline: 0;
}
.hvr-radial-out {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
overflow: hidden;
background: #e1e1e1;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-radial-out:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #2098D1;
border-radius: 100%;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-radial-out:hover, .hvr-radial-out:focus, .hvr-radial-out:active {
color: white;
}
.hvr-radial-out:hover:before, .hvr-radial-out:focus:before, .hvr-radial-out:active:before {
-webkit-transform: scale(2);
transform: scale(2);
}
<button class="hvr-radial-out">Test</button>
It might be because of border: none property you have used on button
You are using both border-radius: 50%; and border: 1px; which might be contradicting each other.
Please try with having border: 1px;
Related
I am trying to make this effect touch-friendly. I have a thumbnail gallery that has titles and descriptions. The title is displayed on load, and when the user hovers over the thumbnail they see the longer description. Then they can click on the entire image to go to the linked page.
I have tried several options, like this one but none seem to work. I'd be fine if the hover acted as a touch to display caption info, and a second touch will open the link that is assigned to the image. Right now, the first touch displays the description for a half second, then follows the link.
I'm open to CSS or js options- I just need to get something to work!
.caption {
position: relative;
overflow: hidden;
/* Only the -webkit- prefix is required these days */
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.caption::before {
content: ' ';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent;
transition: background .35s ease-out;
}
.caption:hover::before {
background: rgba(0, 0, 0, .5);
}
.caption__media {
display: block;
min-width: 100%;
max-width: 100%;
height: auto;
}
.caption__overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 10px;
color: white;
-webkit-transform: translateY(100%);
transform: translateY(100%);
transition: -webkit-transform .35s ease-out;
transition: transform .35s ease-out;
}
.caption:hover .caption__overlay {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.caption__overlay__title {
-webkit-transform: translateY( -webkit-calc(-100% - 10px) );
transform: translateY( calc(-100% - 10px) );
transition: -webkit-transform .35s ease-out;
transition: transform .35s ease-out;
}
.caption:hover .caption__overlay__title {
-webkit-transform: translateY(0);
transform: translateY(0);
}
This is probably what you're looking for.
.hvrbox,
.hvrbox * {
box-sizing: border-box;
}
.hvrbox {
position: relative;
display: inline-block;
overflow: hidden;
max-width: 400px;
height: auto;
}
.hvrbox img {
max-width: 100%;
}
.hvrbox-text a {
text-decoration: none;
color: #ffffff;
font-weight: 700;
padding: 5px;
border: 2px solid #ffffff;
}
.hvrbox .hvrbox-layer_bottom {
display: block;
}
.hvrbox .hvrbox-layer_top {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
color: #fff;
padding: 15px;
-moz-transition: all 0.4s ease-in-out 0s;
-webkit-transition: all 0.4s ease-in-out 0s;
-ms-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.hvrbox:hover .hvrbox-layer_top,
.hvrbox.active .hvrbox-layer_top {
opacity: 1;
}
.hvrbox .hvrbox-text {
text-align: center;
font-size: 18px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.hvrbox .hvrbox-text_mobile {
font-size: 15px;
border-top: 1px solid rgb(179, 179, 179);
/* for old browsers */
border-top: 1px solid rgba(179, 179, 179, 0.7);
margin-top: 5px;
padding-top: 2px;
display: none;
}
.hvrbox.active .hvrbox-text_mobile {
display: block;
}
.hvrbox .hvrbox-layer_slideup {
-moz-transform: translateY(100%);
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
}
.hvrbox:hover .hvrbox-layer_slideup,
.hvrbox.active .hvrbox-layer_slideup {
-moz-transform: translateY(0);
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
<div class="hvrbox">
<img src="https://picsum.photos/5760/3840?image=1067" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top hvrbox-layer_slideup">
<div class="hvrbox-text">Take me to Goolge</div>
</div>
</div>
I want to change the text when hovering over a speechbubble (already created) and set the text back when the mouse goes back. I have a "Welcome!" text set on the speechbubble and I want it to change to "Scroll down". The other issue is that I have set a css transformation on the speechbubble+welcome so that makes it harder..
Here's my code:
#welcome{
position:absolute;
top:50%;
left:50%;
width:auto;
height:auto;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
#speechbubble {
margin-left:110px;
width: 230px;
height: 80px;
line-height:80px;
text-align:center;
font-size:15px;
letter-spacing:2px;
-moz-box-shadow: 5px 5px 5px #888;
-webkit-box-shadow: 5px 5px 5px #888;
box-shadow: 5px 5px 5px #888;
font-family:{select:Title Font};
background: {color:Welcome background};
color:{color:Welcome text};
position: relative;
font-weight:bold;
}
#speechbubble:before {
content:"";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 18px solid {color:Welcome background};
border-bottom: 13px solid transparent;
}
#welcome:hover #speechbubble{
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
margin-left:120px;
}
#welcome #speechbubble{
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
<div id="welcome">
<div id="speechbubble">Welcome!</div>
I've tried some tricks like adding a div for the second text and setting a css hover but it didn't work.. Can anyone help me? Thanks
You can use pseudo class :after and change its content on hover.
Like this:
#welcome {
position: absolute;
top: 50%;
left: 50%;
width: auto;
height: auto;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
#speechbubble {
margin-left: 110px;
width: 230px;
height: 80px;
line-height: 80px;
text-align: center;
font-size: 15px;
letter-spacing: 2px;
-moz-box-shadow: 5px 5px 5px #888;
-webkit-box-shadow: 5px 5px 5px #888;
box-shadow: 5px 5px 5px #888;
font-family: {
select: Title Font
}
;
background: {
color: Welcome background
}
;
color: {
color: Welcome text
}
;
position: relative;
font-weight:bold;
}
#speechbubble:after {
content: "Welcome!";
}
#speechbubble:before {
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 18px solid {
color: Welcome background
}
;
border-bottom: 13px solid transparent;
}
#welcome:hover #speechbubble:after {
content: "Scroll Down";
}
#welcome:hover #speechbubble {
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
margin-left: 120px;
}
#welcome #speechbubble {
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
<div id="welcome">
<div id="speechbubble"></div>
Using :after & :before try this, add this to your css:
#welcome:hover #speechbubble:after {
content: "Scroll Down";
}
#welcome:hover #speechbubble:before {
content: "";
}
#speechbubble:before {
content: "Welcome!";
}
then remove this right,top and position from your css:
#speechbubble:before {
content:"";
/*position: absolute;*/
/*right: 100%;*/
/*top: 26px;*/
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 18px solid {color:Welcome background};
border-bottom: 13px solid transparent;
}
also remove the word Welcome:
<div id="welcome">
<div id="speechbubble"></div>
now this is the magic of CSS :)
Here is an example code using pseduo elements with data- attributes to
achieve the things:
#welcome {
position: absolute;
top: 50%;
left: 50%;
width: auto;
height: auto;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
body {
background: black;
}
/* .button */
#speechbubble {
display: inline-block;
position: relative;
margin: 1em;
padding: 0.67em;
border: 2px solid #FFF;
overflow: hidden;
text-decoration: none;
font-size: 2em;
outline: none;
color: #FFF;
background: transparent;
font-family: 'raleway', sans-serif;
}
#speechbubble span {
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
}
#speechbubble:before {
content: '';
position: absolute;
top: 0.67em;
left: 0;
width: 100%;
text-align: center;
opacity: 0;
-webkit-transition: .4s, opacity .6s;
-moz-transition: .4s, opacity .6s;
-o-transition: .4s, opacity .6s;
transition: .4s, opacity .6s;
}
/* :before */
#speechbubble:before {
content: attr(data-hover);
-webkit-transform: translate(-150%, 0);
-moz-transform: translate(-150%, 0);
-ms-transform: translate(-150%, 0);
-o-transform: translate(-150%, 0);
transform: translate(-150%, 0);
}
/* Span on :hover and :active */
#speechbubble:hover span {
opacity: 0;
-webkit-transform: scale(0.3);
-moz-transform: scale(0.3);
-ms-transform: scale(0.3);
-o-transform: scale(0.3);
transform: scale(0.3);
}
/*
We show :before pseudo-element on :hover
*/
#speechbubble:hover:before {
opacity: 1;
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-transition-delay: .4s;
-moz-transition-delay: .4s;
-o-transition-delay: .4s;
transition-delay: .4s;
}
<div id="welcome">
<div id="speechbubble" data-hover="Scroll Down"><span>Welcome!</span></div>
</div>
Here's very basic way to do it. Just put the text in some tags, and show/hide them on hover.
Also you can use the attr and :after features from css3.
#welcome{
position:absolute;
top:50%;
left:50%;
width:auto;
height:auto;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
#speechbubble {
margin-left:110px;
width: 230px;
height: 80px;
line-height:80px;
text-align:center;
font-size:15px;
letter-spacing:2px;
-moz-box-shadow: 5px 5px 5px #888;
-webkit-box-shadow: 5px 5px 5px #888;
box-shadow: 5px 5px 5px #888;
font-family:{select:Title Font};
background: {color:Welcome background};
color:{color:Welcome text};
position: relative;
font-weight:bold;
}
#speechbubble:before {
content:"";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 18px solid {color:Welcome background};
border-bottom: 13px solid transparent;
}
#welcome:hover #speechbubble{
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
margin-left:120px;
}
#welcome #speechbubble .hover_on {
display: none;
}
#welcome #speechbubble .hover_off {
display: inline-block;
}
#welcome:hover #speechbubble .hover_on {
display: inline-block;
}
#welcome:hover #speechbubble .hover_off {
display: none;
}
#welcome #speechbubble{
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
<div id="welcome">
<div id="speechbubble"><p class="hover_off">Welcome!</p><p class="hover_on">Scroll down!</p></div>
I have a circle with some percentage covered border on top of another one with lower opacity. How to make this by CSS? I tried width: 20%, but for border-radius it does not work. I want to make this as on example image:
Also how to make ending of partly covered border with half-circle shape?
this is a purely css based progress bar in circle shape
in your html:
<div class="c100 p25">
<span>25%</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
in css:
.c100.p25 .fill {
position: absolute;
border: 0.08em solid #307bbb;
width: 0.84em;
height: 0.84em;
clip: rect(0em, 0.5em, 1em, 0em);
border-radius: 50%;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
.c100 {
position: relative;
font-size: 120px;
width: 1em;
height: 1em;
border-radius: 50%;
float: left;
margin: 0 0.1em 0.1em 0;
background-color: #cccccc;
}
.c100 *,
.c100 *:before,
.c100 *:after {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.c100.center {
float: none;
margin: 0 auto;
}
.c100 > span {
position: absolute;
width: 100%;
z-index: 1;
left: 0;
top: 0;
width: 5em;
line-height: 5em;
font-size: 0.2em;
color: #cccccc;
display: block;
text-align: center;
white-space: nowrap;
-webkit-transition-property: all;
-moz-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.c100:after {
position: absolute;
top: 0.08em;
left: 0.08em;
display: block;
content: " ";
border-radius: 50%;
background-color: #f5f5f5;
width: 0.84em;
height: 0.84em;
-webkit-transition-property: all;
-moz-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-transition-timing-function: ease-in;
-moz-transition-timing-function: ease-in;
-o-transition-timing-function: ease-in;
transition-timing-function: ease-in;
}
.c100 .slice {
position: absolute;
width: 1em;
height: 1em;
clip: rect(0em, 1em, 1em, 0.5em);
}
.c100.p25 .bar {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
.c100:hover {
cursor: default;
}
.c100:hover > span {
width: 3.33em;
line-height: 3.33em;
font-size: 0.3em;
color: #307bbb;
}
.c100:hover:after {
top: 0.04em;
left: 0.04em;
width: 0.92em;
height: 0.92em;
}
I have a problem when I try to use overflow: hidden; to hide a background effect on a button. I see one pixel around of border-radius in Chrome:
What can I do to hide these pixels? I can try to use box-shadow, but maybe you know an easier way.
JsFiddle
test
Css:
.btn {
margin: 20px;
padding: 10px 30px;
font-size: 14px;
text-transform: uppercase;
color: #fff;
border: 2px solid #f0913a;
-webkit-border-radius: 20px;
border-radius: 20px;
cursor: pointer;
overflow: hidden; /* <-- I try hide background but always get http://screencast.com/t/qktgZwmVtH */
}
.hvr-shutter-in-horizontal {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
background: #181818;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: .3s;
transition-duration: .3s;
}
.hvr-shutter-in-horizontal:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #f0913a;
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transform-origin: 50%;
transform-origin: 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-shutter-in-horizontal:active:before,
.hvr-shutter-in-horizontal:focus:before,
.hvr-shutter-in-horizontal:hover:before {
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
you may use an inset shadow:
.btn {
margin: 20px;
padding: 10px 30px;
font-size: 14px;
text-transform: uppercase;
color: #fff;
border: 2px solid #f0913a;
border-radius: 20px;
cursor: pointer;
overflow:hidden;
}
.hvr-shutter-in-horizontal {
display: inline-block;
vertical-align: middle;
}
.hvr-shutter-in-horizontal:before {
content: "";
position: absolute;
z-index: -1;
top: -50px;
bottom: -50px;
left: 0px;
right: 0px;
background: #f0913a;
transition: 0.5s;
border-radius: inherit;
box-shadow: inset 0 0 0 0 #181818;
}
.hvr-shutter-in-horizontal:active:before,
.hvr-shutter-in-horizontal:focus:before,
.hvr-shutter-in-horizontal:hover:before {
box-shadow: inset 0 0 0 150px #181818;
}
test
it doesn't eradicate the bug , but the black is not there bleeding anymore.
to avoid the bug, Use another method, you may use a background-image such as a css gradient and resize it on hover (no pseudo involved either). example:
.btn {
margin: 20px;
padding: 10px 30px;
font-size: 14px;
text-transform: uppercase;
color: #fff;
border: 2px solid #f0913a;
-webkit-border-radius: 20px;
border-radius: 20px;
cursor: pointer;
overflow: hidden;
background: linear-gradient(black, black) left no-repeat, linear-gradient(black, black) right no-repeat #f0913a;
background-size: 0 100%;
transition: background-size 0.3s;
}
.hvr-shutter-in-horizontal {
display: inline-block;
vertical-align: middle;
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
}
.hvr-shutter-in-horizontal:active,
.hvr-shutter-in-horizontal:focus,
.hvr-shutter-in-horizontal:hover {
background-size: 100% 100%;
}
test
you just need to add background-clip:padding-box; on class .hvr-shutter-in-horizontal
CSS:
.btn {
margin: 20px;
padding: 10px 30px;
font-size: 14px;
text-transform: uppercase;
color: #fff;
border: 2px solid #f0913a;
-webkit-border-radius: 20px;
border-radius: 20px;
cursor: pointer;
overflow: hidden;
}
.hvr-shutter-in-horizontal {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
background: #181818;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: .3s;
transition-duration: .3s;
/* Prevent background color leak outs */
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
.hvr-shutter-in-horizontal:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #f0913a;
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transform-origin: 50%;
transform-origin: 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-shutter-in-horizontal:active:before,
.hvr-shutter-in-horizontal:focus:before,
.hvr-shutter-in-horizontal:hover:before {
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
Demo on jsfiddle: https://jsfiddle.net/hamzanisar/wd9exfmx/9/
remove the overflow:hidden from the .btn class and change the left, right properties for the :before element, also set the border-radius to inherit for the :before element check the fiddle here for eg https://jsfiddle.net/0ap4qbrn/
.btn {
margin: 20px;
padding: 10px 30px;
font-size: 14px;
text-transform: uppercase;
color: #fff;
border: 2px solid #f0913a;
-webkit-border-radius: 20px;
border-radius: 20px;
cursor: pointer;
}
.hvr-shutter-in-horizontal {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
background: #181818;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: .3s;
transition-duration: .3s;
}
.hvr-shutter-in-horizontal:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: -2px;/*equal to the border width of .btn but negated*/
right: -2px;/*equal to the border width of .btn but negated*/
background: #f0913a;
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transform-origin: 50%;
transform-origin: 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
border-radius: inherit;
}
.hvr-shutter-in-horizontal:active:before,
.hvr-shutter-in-horizontal:focus:before,
.hvr-shutter-in-horizontal:hover:before {
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
give box-sizing:border-box; with webkit and moz prefix this may solve your issue
I was playing around with some CSS transitions, and trying to figure this out. I would like the text color to change (from left to right) INSTEAD of the background.
Here is the code: (codepen here: http://codepen.io/xkurohatox/pen/zGboMz)
HTML:
View Cart
CSS:
a.added_to_cart.wc-forward {
font-size:100px;
color:black;
}
a.added_to_cart.wc-forward {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
a.added_to_cart.wc-forward:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: red;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
a.added_to_cart.wc-forward:hover, a.added_to_cart.wc-forward:focus, a.added_to_cart.wc-forward:active {
color: white;
}
a.added_to_cart.wc-forward:hover:before, a.added_to_cart.wc-forward:focus:before, a.added_to_cart.wc-forward:active:before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}
I already tried the obvious, such as changing background-color to color and playing around with translateZ. I don't think I've ever seen a css font color transition before so I would LOVE to see if anyone here is talented enough to come up with one.
Got the base code from here: https://github.com/IanLunn/Hover
Thank you in advance xx :)
It absolutely can be done using a little bit of trickery. Here's a working example that uses a mask to reveal the colored text.
Codepen: http://codepen.io/maxlaumeister/pen/eNXBaW
Live Demo:
a.added_to_cart.wc-forward {
font-size:100px;
color:black;
}
a.added_to_cart.wc-forward {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
.mask {
display: inline-block;
position: absolute;
top: 0;
left: 0;
width: 0px;
overflow: hidden;
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transition-property: width;
transition-property: width;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
text-shadow:
-1px -1px 0 red,
1px -1px 0 red,
-1px 1px 0 red,
1px 1px 0 red;
}
.mask a.added_to_cart.wc-forward {
color: red;
}
#container:hover .mask {
width: 500px;
-webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}
body {
margin: 0;
}
a.added_to_cart.wc-forward.under {
position: absolute;
left: 0;
top: 0;
}
#inner {
width: 500px;
}
<div id="container">
View Cart
<div class="mask">
<div id="inner">
View Cart
</div>
</div>
</div>
I removed background color from a.added_to_cart.wc-forward:before
CSS
a.added_to_cart.wc-forward {
font-size:100px;
color:black;
}
a.added_to_cart.wc-forward {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
a.added_to_cart.wc-forward:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
a.added_to_cart.wc-forward:hover, a.added_to_cart.wc-forward:focus, a.added_to_cart.wc-forward:active {
color: red;
}
a.added_to_cart.wc-forward:hover:before, a.added_to_cart.wc-forward:focus:before, a.added_to_cart.wc-forward:active:before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}
HTML
View Cart
Demo here