Hello, ladies and gentlemen.
Recently I was trying to make button with background animation.
So I start with this html code:
<div class="outer">
<h1>Left to Right</h1>
<div class="outer__button button__left-right">
<div class="text">Button</div>
</div>
<h1>Right to Left</h1>
<div class="outer__button button__right-left">
<div class="text">Button</div>
</div>
<h1>Top to Bottom</h1>
<div class="outer__button button__top-bottom">
<div class="text">Button</div>
</div>
<h1>Bottom to Top</h1>
<div class="outer__button button__bottom-top">
<div class="text">Button</div>
</div>
</div>
And I set the font family to Montserrat:
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&display=swap');
html {
font-family: 'Montserrat', sans-serif;
}
After that I set the layout into flex because I want the content into columns.
.outer {
margin: 5em;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
h1 {
color: teal;
text-transform: uppercase;
}
.outer__button {
padding: .5em 1.5em;
font-size: 2em;
font-weight: 700;
color: #000;
text-transform: uppercase;
margin-top: -1em;
border-radius: 100vh;
}
Now lets give fill background animation for the 1st button:
/* LEFT TO RIGHT */
.button__left-right {
border: 2px solid black;
background: linear-gradient(to right, #000 50%, #fff 50%);
background-size: 200% 100%;
background-position: bottom right;
transition: all .7s ease-out;
}
.button__left-right:hover {
border: 2px solid limegreen;
background-position: bottom left;
color: #fff;
}
From the code above, I set background with linear-gradient(to right, #000 50%, #fff 50%)
, because I want the background move from left to right with black-white color. And I set background-size
to 200% width and 100% height. When the width is bigger than 100% it will not fill the button with black, instead will be filled with white background.
Then, I set the animation stop at right position of the button so I put background-position: bottom right;
. After that, because I want the animation start when hover I put background-position: bottom left;
on hover state.
It works :)
Let's add and modify linear-gradient
, background-size
and background-position
to make other buttons have similar animation with different directions.
/* RIGHT TO LEFT */
.button__right-left {
border: 2px solid black;
background: linear-gradient(to left, #000 50%, #fff 50%);
background-size: 200% 100%;
background-position: bottom left;
transition: all .7s ease-out;
}
.button__right-left:hover {
border: 2px solid limegreen;
background-position: bottom right;
color: #fff;
}
/* TOP TO BOTTOM */
.button__top-bottom {
border: 2px solid black;
background: linear-gradient(to bottom, #000 50%, #fff 50%);
background-size: 100% 200%;
background-position: bottom left;
transition: all .5s ease-out;
}
.button__top-bottom:hover {
border: 2px solid limegreen;
background-position: top left;
color: #fff;
}
/* BOTTOM TO TOP */
.button__bottom-top {
border: 2px solid black;
background: linear-gradient(to top, #000 50%, #fff 50%);
background-size: 100% 200%;
background-position: top left;
transition: all .5s ease-out;
}
.button__bottom-top:hover {
border: 2px solid limegreen;
background-position: bottom left;
color: #fff;
}
The full code are posted on my codepen link below: https://codepen.io/flyingduck92/pen/yLeEGNg
That's all folks. See you next time.
Happy coding!
Top comments (1)
Hey, thanks for your article. Could you perhaps help me with a similar, but a bit more complex, thing?