Saturday, January 18, 2020

Fill element on hover

Create a button so that on hover the background color fills the element from left, right or center side of the element.

.button{
  position: relative;
  display: inline-block;
  padding: 15px 70px;
  border: 5px solid #D42069;
  color: #D42069;
  font-size: 30px;
  font-family: arial;
  background-image: linear-gradient(#D42069, #D42069);
  background-repeat: no-repeat;
  border-radius:50px;
  transition: background-size .5s, color .5s;
}
.center-right-left, .center-top-bottom, .center-corner {
  background-position: 50% 50%;
}
.to-left {
  background-position: 100% 50%;
}
.to-right {
  background-position: 0% 50%;
}
.to-top {
  background-position: 50% 100%;
}
.to-bottom {
  background-position: 50% 0%;
}
.center-right-left, .to-left, .to-right {
  background-size: 0% 100%;
}
.center-top-bottom, .to-top, .to-bottom {
  background-size: 100% 0%;
}
.center-corner {
  background-size: 0% 0%;
}
.button:hover {
  background-size: 100% 100%;
  color: #fff;
}

<h1>
From center towards left and right</h1>
<div class='button center-right-left'>
NEXT</div>
<h1>
From center towards top and bottom</h1>
<div class='button center-top-bottom'>
NEXT</div>
<h1>
From center towards corners</h1>
<div class='button center-corner'>
NEXT</div>
<h1>
From right to left</h1>
<div class='button to-left'>
NEXT</div>
<h1>
From left to right</h1>
<div class='button to-right'>
NEXT</div>
<h1>
From bottom to top</h1>
<div class='button to-top'>
NEXT</div>
<h1>
From top to bottom</h1>
<div class='button to-bottom'>
NEXT</div>

Saturday, January 18, 2020

Fill element on hover

OUT Put

From center towards left and right

From center towards top and bottom

From center towards corners

From right to left

From left to right

From bottom to top

From top to bottom

No comments:

Post a Comment