I make my project in Bootstrap 4.
I have this code:
.back-to-top {
width: 36px;
height: 36px;
border-radius: 50%;
text-align: center;
border: 3px solid #c1c1c1;
justify-content: center;
padding-top: 5px;
position: fixed;
bottom: 25px;
right: 15px;
display: none;
z-index: 999;
transition: opacity .5s;
}
.back-to-top::before {
padding-top: 15px;
animation-name: animation-arrow;
animation-duration: 1.5s;
animation-iteration-count: infinite;
}
#keyframes animation-arrow {
0% {
padding-top: 0px
}
50% {
padding-top: 5px
}
100% {
padding-top: 10px
}
}
<a id="back-to-top" href="#" class="back-to-top" role="button"><img src="images/back.png" class="img-fluid"> </a>
I'd like to move the images / back.png up / down arrow.
(I would like the picture to move slightly up / down) - but it doesn't work
How can I repair it?
check this out:
.back-to-top {
width: 36px;
height: 36px;
border-radius: 50%;
text-align: center;
border: 3px solid #c1c1c1;
position: fixed;
bottom: 25px;
right: 15px;
z-index: 999;
transition: opacity .5s;
}
.back-to-top > i {
width: 15px;
height: 15px;
margin-top: 15px;
display: inline-block;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNDkwLjY4OCA0OTAuNjg4IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0OTAuNjg4IDQ5MC42ODg7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIHN0eWxlPSJmaWxsOiNGRkMxMDc7IiBkPSJNNDcyLjMyOCwxMjAuNTI5TDI0NS4yMTMsMzQ3LjY2NUwxOC4wOTgsMTIwLjUyOWMtNC4yMzctNC4wOTMtMTAuOTktMy45NzUtMTUuMDgzLDAuMjYyDQoJYy0zLjk5Miw0LjEzNC0zLjk5MiwxMC42ODcsMCwxNC44MmwyMzQuNjY3LDIzNC42NjdjNC4xNjUsNC4xNjQsMTAuOTE3LDQuMTY0LDE1LjA4MywwbDIzNC42NjctMjM0LjY2Nw0KCWM0LjIzNy00LjA5Myw0LjM1NC0xMC44NDUsMC4yNjItMTUuMDgzYy00LjA5My00LjIzNy0xMC44NDUtNC4zNTQtMTUuMDgzLTAuMjYyYy0wLjA4OSwwLjA4Ni0wLjE3NiwwLjE3My0wLjI2MiwwLjI2Mg0KCUw0NzIuMzI4LDEyMC41Mjl6Ii8+DQo8cGF0aCBkPSJNMjQ1LjIxMywzNzMuNDE1Yy0yLjgzMSwwLjAwNS01LjU0OC0xLjExNS03LjU1Mi0zLjExNUwyLjk5NCwxMzUuNjMzYy00LjA5My00LjIzNy0zLjk3NS0xMC45OSwwLjI2Mi0xNS4wODMNCgljNC4xMzQtMy45OTIsMTAuNjg3LTMuOTkyLDE0LjgyLDBsMjI3LjEzNiwyMjcuMTE1bDIyNy4xMTUtMjI3LjEzNmM0LjA5My00LjIzNywxMC44NDUtNC4zNTQsMTUuMDgzLTAuMjYyDQoJYzQuMjM3LDQuMDkzLDQuMzU0LDEwLjg0NSwwLjI2MiwxNS4wODNjLTAuMDg2LDAuMDg5LTAuMTczLDAuMTc2LTAuMjYyLDAuMjYyTDI1Mi43NDQsMzcwLjI3OQ0KCUMyNTAuNzQ4LDM3Mi4yODEsMjQ4LjAzOSwzNzMuNDA4LDI0NS4yMTMsMzczLjQxNXoiLz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjwvc3ZnPg0K) no-repeat;
}
.bounce {
animation: bounce 2s infinite;
}
#keyframes bounce {
0% {
transform: translateY(-10px);
}
50% {
transform: translateY(0);
}
100% {
transform: translateY(-10px);
}
}
<a id="back-to-top" href="#" class="back-to-top" role="button">
<i class="arrow bounce"></i>
</a>
When I animate a simple circle I get a weird flicker on the side - like something tryingh to push inside - and I can't figure out why. It also happens when I use keyframes to animate and on different browsers.
Any help appreciated.
.frame {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 400px;
margin-top: -200px;
margin-left: -200px;
border-radius: 2px;
box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);
overflow: hidden;
background: #fff;
color: #333;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #E56262;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 3;
}
.circle {
background-color: #fff;
width: 100px;
height: 100px;
border-radius:50%;
box-shadow: 0px 0 15px 2px #424040;
position: relative;
z-index: 4;
transition: all 1s;
}
.circle:hover {
transform: scale(1.5);
}
#keyframes scaleMe {
0% {
transform: scale(0%);
}
50% {
transform: scale(100%);
}
100% {
transform: scale(0%);
}
}
<div class="frame">
<div class="center">
<div class="circle"></div>
</div>
</div>
I think your problem is similar to this. CSS Animation break transform
Removing the transform(-50%, -50%) remove the flickering, so I centered your div in another way and it look's ok.
.frame {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 400px;
margin-top: -200px;
margin-left: -200px;
border-radius: 2px;
box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);
overflow: hidden;
background: #fff;
color: #333;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #E56262;
display: flex;
}
.center {
margin: auto;
z-index: 3;
}
.circle {
background-color: #fff;
width: 100px;
height: 100px;
border-radius:50%;
box-shadow: 0px 0 15px 2px #424040;
position: relative;
z-index: 4;
transition: all 1s;
}
.circle:hover {
transform: scale(1.5);
}
#keyframes scaleMe {
0% {
transform: scale(0%) translate(-50%,-50%);
}
50% {
transform: scale(100%) translate(-50%,-50%);
}
100% {
transform: scale(0%) translate(-50%,-50%);
}
}
<div class="frame">
<div class="center">
<div class="circle"></div>
</div>
</div>
I created a call-to-action button that makes a small animation on click:
Static and showing ADD TO CART
On click: Background animation (duration 1sec) and content = 'Adding to cart'
After 1sec: New background colour and showing ADDED TO CART Go to Cart
Button template:
Basically, I used the ::after to change the background colour as a progress bar and ::before to the content to ADDING TO CART.
All works perfect BUT the text ADDING TO CART is blurry on the mobile version.
Print on the desktop and mobile:
The relevant code:
changeBtn() {
addCartEl.classList.add('global__main-btn--active');
addCartEl.innerHTML = "Added to cart<span>Go to cart</span>"
}
$('#add-to-cart').on('click', changeBtn());
#keyframes adding {
0% {
width: 0%;
opacity: 1;
}
99% {
width: 99%;
opacity: 1;
}
100% {
width: 100%;
opacity: 0;
}
}
#keyframes txt-adding {
0% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes added {
0% {
color: transparent;
background-color: #6abf58;
}
100% {
color: #b4dfab;
background-color: #3f7634;
}
}
.global__main-btn {
font-size: 20pt;
font-weight: 700;
text-transform: uppercase;
color: white;
background-color: green;
padding: 1rem 5rem;
width: 100%;
border-radius: 0.5rem;
border: 1px solid green;
border-bottom: 4px solid green;
margin-bottom: 0.5rem;
max-width: 450px;
}
.global__main-btn::before {
content: "";
background-color: white;
mask-image: url("../assets/svg/cart-plus-solid.svg");
position: relative;
float: left;
width: 30px;
height: 27px;
}
.global__main-btn:hover {
box-shadow: inset 0 0 4rem green;
cursor: pointer;
}
.global__main-btn--active {
border: none;
padding: 0.6rem 5rem;
position: relative;
color: transparent;
animation: added 0.2s 0.8s normal linear forwards;
min-height: 66px;
}
.global__main-btn--active span {
display: block;
font-weight: 300;
font-size: 12pt;
}
.global__main-btn--active:hover {
box-shadow: inset 0 0 4rem green;
}
.global__main-btn--active::before {
content: "";
width: 100%;
height: 100%;
background-color: green;
border-radius: 0.5rem;
position: absolute;
top: 0;
left: 0;
mask-image: none;
animation: adding 1s normal linear forwards;
}
.global__main-btn--active::after {
content: "Adding to cart";
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
width: 100%;
color: white;
animation: txt-adding 1s normal linear forwards;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="submit" class="buy__btn global__main-btn" id="add-to-cart">Add to cart</button>
I had a similar issue and figured it has to do with the transform property. As soon as i added a transformation, the text got blurry. Removing it will solve the problem. This seems to be a webkit or blink engine bug.
I'm using a development named "Hover Effect Ideas" (Warm Oscar) available on internet, the purpose of which is to add an effect to hovering an image :
https://codepen.io/anon/pen/zapzzE
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
body {
background: #f6f9fa;
color: #536d76;
font-weight: 400;
font-size: 1em;
font-family: "Raleway", Arial, sans-serif;
}
a {
color: #4f7f90;
text-decoration: none;
outline: none;
}
a:hover,
a:focus {
color: #39545e;
}
.grid {
overflow: hidden;
margin: 0;
padding: 3em 0 0 0;
width: 100%;
list-style: none;
text-align: center;
}
/* Common style */
.grid figure {
position: relative;
z-index: 1;
display: inline-block;
overflow: hidden;
margin: -0.135em;
width: 33.333%;
height: 400px;
background: #3085a3;
text-align: center;
cursor: pointer;
}
.grid figure img {
position: relative;
display: block;
min-height: 100%;
opacity: 0.8;
}
.grid figure figcaption {
padding: 2em;
color: #fff;
text-transform: uppercase;
font-size: 1.25em;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.grid figure figcaption::before,
.grid figure figcaption::after {
pointer-events: none;
}
.grid figure figcaption,
.grid figure a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure a {
z-index: 1000;
text-indent: 200%;
white-space: nowrap;
font-size: 0;
opacity: 0;
}
.grid figure h2 {
font-weight: 300;
}
.grid figure h2 span {
font-weight: 800;
}
.grid figure h2,
.grid figure p {
margin: 0;
}
.grid figure p {
letter-spacing: 1px;
font-size: 68.5%;
}
/* Individual effects */
/*---------------*/
/***** Oscar *****/
/*---------------*/
figure.effect-oscar {
background: -webkit-linear-gradient( 45deg, #22682a 0%, #9b4a1b 40%, #3a342a 100%);
background: linear-gradient(45deg, #22682a 0%, #9b4a1b 40%, #3a342a 100%);
}
figure.effect-oscar img {
opacity: 0.9;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}
figure.effect-oscar figcaption {
padding: 3em;
background-color: rgba(58, 52, 42, 0.7);
-webkit-transition: background-color 0.35s;
transition: background-color 0.35s;
}
figure.effect-oscar figcaption::before {
position: absolute;
top: 30px;
right: 30px;
bottom: 30px;
left: 30px;
border: 1px solid #fff;
content: "";
}
figure.effect-oscar h2 {
margin: 20% 0 10px 0;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
figure.effect-oscar figcaption::before,
figure.effect-oscar p {
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale(0);
transform: scale(0);
}
figure.effect-oscar:hover h2 {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
figure.effect-oscar:hover figcaption::before,
figure.effect-oscar:hover p {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
figure.effect-oscar:hover figcaption {
background-color: rgba(58, 52, 42, 0);
}
figure.effect-oscar:hover img {
opacity: 0.4;
}
#media screen and (max-width: 69.5em) {
.grid figure {
width: 50%;
}
.grid figure figcaption {
font-size: 90%;
}
}
#media screen and (max-width: 41.5em) {
.grid figure {
width: 100%;
}
}
<div class="container">
<div class="grid">
<figure class="effect-oscar">
<img src="https://tympanus.net/Development/HoverEffectIdeas/img/8.jpg" alt="img08" />
<figcaption>
<h2><span>Single line</span></h2>
<p>Oscar is a decent man. He used to clean porches with pleasure.</p>
View more
</figcaption>
</figure>
<figure class="effect-oscar">
<img src="https://tympanus.net/Development/HoverEffectIdeas/img/8.jpg" alt="img08" />
<figcaption>
<h2>Here I have <span>two lines</span>or more .......................</h2>
<p>Oscar is a decent man. He used to clean porches with pleasure.</p>
View more
</figcaption>
</figure>
<figure class="effect-oscar">
<img src="https://tympanus.net/Development/HoverEffectIdeas/img/8.jpg" alt="img08" />
<figcaption>
<h2><span>Single line</span></h2>
<p>Oscar is a decent man. He used to clean porches with pleasure.</p>
View more
</figcaption>
</figure>
</div>
</div>
<!-- /container -->
I have titles sometimes on one line and sometimes on two lines.
I'm having trouble aligning these titles like this :
Alignement of titles
When there are two or more text lines, the titles are shifted.
CSS is not for me! Can you help me please ?
The h2 is initially offset from the top using transform: translate3d(0, 100%, 0).
This moves the element on the y axis, and is causing a different displacement depending on the overall height of the element (I think).
You could transition the top value instead. To do this, add position: relative to the h2, and give it an initial value (top: 50px in the example below). On hover set top: 0.
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
body {
background: #f6f9fa;
color: #536d76;
font-weight: 400;
font-size: 1em;
font-family: "Raleway", Arial, sans-serif;
}
a {
color: #4f7f90;
text-decoration: none;
outline: none;
}
a:hover,
a:focus {
color: #39545e;
}
.grid {
overflow: hidden;
margin: 0;
padding: 3em 0 0 0;
width: 100%;
list-style: none;
text-align: center;
}
/* Common style */
.grid figure {
position: relative;
z-index: 1;
display: inline-block;
overflow: hidden;
margin: -0.135em;
width: 33.333%;
height: 400px;
background: #3085a3;
text-align: center;
cursor: pointer;
}
.grid figure img {
position: relative;
display: block;
min-height: 100%;
opacity: 0.8;
}
.grid figure figcaption {
padding: 2em;
color: #fff;
text-transform: uppercase;
font-size: 1.25em;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.grid figure figcaption::before,
.grid figure figcaption::after {
pointer-events: none;
}
.grid figure figcaption,
.grid figure a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure a {
z-index: 1000;
text-indent: 200%;
white-space: nowrap;
font-size: 0;
opacity: 0;
}
.grid figure h2 {
font-weight: 300;
}
.grid figure h2 span {
font-weight: 800;
}
.grid figure h2,
.grid figure p {
margin: 0;
}
.grid figure p {
letter-spacing: 1px;
font-size: 68.5%;
}
/* Individual effects */
/*---------------*/
/***** Oscar *****/
/*---------------*/
figure.effect-oscar {
background: -webkit-linear-gradient( 45deg, #22682a 0%, #9b4a1b 40%, #3a342a 100%);
background: linear-gradient(45deg, #22682a 0%, #9b4a1b 40%, #3a342a 100%);
}
figure.effect-oscar img {
opacity: 0.9;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}
figure.effect-oscar figcaption {
padding: 3em;
background-color: rgba(58, 52, 42, 0.7);
-webkit-transition: background-color 0.35s;
transition: background-color 0.35s;
}
figure.effect-oscar figcaption::before {
position: absolute;
top: 30px;
right: 30px;
bottom: 30px;
left: 30px;
border: 1px solid #fff;
content: "";
}
figure.effect-oscar h2 {
margin: 20% 0 10px 0;
transition: top 0.35s;
position: relative;
top: 50px;
}
figure.effect-oscar figcaption::before,
figure.effect-oscar p {
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale(0);
transform: scale(0);
}
figure.effect-oscar:hover h2 {
top: 0;
}
figure.effect-oscar:hover figcaption::before,
figure.effect-oscar:hover p {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
figure.effect-oscar:hover figcaption {
background-color: rgba(58, 52, 42, 0);
}
figure.effect-oscar:hover img {
opacity: 0.4;
}
#media screen and (max-width: 69.5em) {
.grid figure {
width: 50%;
}
.grid figure figcaption {
font-size: 90%;
}
}
#media screen and (max-width: 41.5em) {
.grid figure {
width: 100%;
}
}
<div class="container">
<div class="grid">
<figure class="effect-oscar">
<img src="https://tympanus.net/Development/HoverEffectIdeas/img/8.jpg" alt="img08" />
<figcaption>
<h2><span>Single line</span></h2>
<p>Oscar is a decent man. He used to clean porches with pleasure.</p>
View more
</figcaption>
</figure>
<figure class="effect-oscar">
<img src="https://tympanus.net/Development/HoverEffectIdeas/img/8.jpg" alt="img08" />
<figcaption>
<h2>Here I have <span>two lines</span>or more .......................</h2>
<p>Oscar is a decent man. He used to clean porches with pleasure.</p>
View more
</figcaption>
</figure>
<figure class="effect-oscar">
<img src="https://tympanus.net/Development/HoverEffectIdeas/img/8.jpg" alt="img08" />
<figcaption>
<h2><span>Single line</span></h2>
<p>Oscar is a decent man. He used to clean porches with pleasure.</p>
View more
</figcaption>
</figure>
</div>
</div>
<!-- /container -->
I'm building a website currently and am experiencing issues with transform: scale. I've got a button, and when a user hovers over it, two things happen:
A background "sweeps" in diagonally
The button label colour changes
The button grows slightly
I have got this working, and it looks really nice, but after implementing point 3, I'm seeing a weird gap to the left hand side when the button grows.
Here is my code: click for demo
HTML
Hover
CSS
body {
text-align: center;
padding-top: 10%;
}
.button {
display: inline-block;
text-transform: uppercase;
font-size: 1.1em;
font-weight: 600;
background: transparent;
transition: all ease .25s;
border: 3px solid green;
color: green;
position: relative;
overflow: hidden;
z-index: 2;
font-family: sans-serif;
padding: 20px 35px;
text-decoration: none;
}
.button:before {
content: ' ';
transition: all ease-out .25s;
width: 200%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transform-origin: 0 0;
z-index: -1;
transform: skewX(-45deg) translateX(-100%);
background: green;
}
.button:hover:before {
transform: translateX(0);
}
.button:hover {
color: white;
transform: scale(1.1);
}
And here's a screenshot of the gap I'm seeing. This issue occurs in Chrome and Safari (I haven't tested Firefox or IE as I can't download them at work).
Screenshot of weird gap
It "only" appears in Chrome but not Firefox (edit: worse in Edge: first it's on the left then on bottom...). Not sure if a rounding error or something else is the cause of that gap, but I find that replacing border by a box-shadow improves the rendering.
There's still a gap that can be seen near the end of the transition but finally disappears so I added 2 box-shadows on :hover: the new one is inset and fills the gap between "border/box-shadow" and content box faster.
Codepen: http://codepen.io/PhilippeVay/pen/oYjZzK?editors=0100
body {
text-align: center;
padding-top: 10%;
}
.button {
display: inline-block;
text-transform: uppercase;
font-size: 1.1em;
font-weight: 600;
background: transparent;
transition: all ease .25s;
box-shadow: 0 0 0 3px green; /* replaces border which caused a gap in Chr, not Fx */
color: green;
position: relative;
overflow: hidden;
z-index: 2;
font-family: sans-serif;
padding: 19px 34px;
text-decoration: none;
}
.button:before {
content: ' ';
transition: transform ease-out .25s;
width: 200%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transform-origin: 0 0;
z-index: -1;
transform: skewX(-45deg) translateX(-100%);
background: green;
}
.button:hover:before {
transform: translateX(0);
}
.button:hover {
color: white;
box-shadow: 0 0 0 3px green, inset 0 0 0 1px green; /* improves end of transition in Chrome */
transform: scale(1.1);
}
Hover
EDIT: playing with the size of the transitioned :pseudo
.button:before {
content: ' ';
transition: all ease-out .25s;
width: calc(200% + 6px);
height: calc(100% + 6px);
position: absolute;
top: -3px;
left: -3px;
transform-origin: 0 3px;
z-index: -1;
transform: skewX(-45deg) translateX(-100%);
background: green;
}
to take into account the border but that doesn't change anything because of overflow: hidden.
So here's my third try: by adding a container (or having the A element as a container) and keeping the border on the child element, it makes that gap disappear (overflow is around the border).
Codepen: http://codepen.io/PhilippeVay/pen/ZBbKWd
body {
text-align: center;
padding-top: 10%;
}
a {
display: inline-block;
overflow: hidden;
background: transparent;
transition: all ease .25s;
color: green;
position: relative;
z-index: 2;
font-family: sans-serif;
text-decoration: none;
}
a > span {
display: inline-block;
text-transform: uppercase;
font-size: 1.1em;
font-weight: 600;
border: 3px solid green;
padding: 20px 35px;
}
a:before {
content: ' ';
transition: all ease-out .25s;
width: 200%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transform-origin: 0 0;
z-index: -1;
transform: skewX(-45deg) translateX(-100%);
background: green;
}
a:hover:before {
transform: translateX(0);
}
a:hover {
color: white;
transform: scale(1.1);
}
<span class="bd">Hover</span>
Fx transitions till the end flawlessly... and "corrects" the width by adding 2px on the right. But it's already visible in your jsbin so it's another story (and less annoying I guess as user will have clicked by then imho)