CODEWITHSUNDEEP
cssbutton
Nnoka
Nnoka

Reputation: 15

Css button box-shadow transition

I'm having some trouble with making an transition effect on a button.

Using "box-shadow" I am able to create this:

.load {
	color:black;
	border:none;
	background-color: #ffffff;
	width: 100px;
	height: 30px;
	margin-left: 21px;
	box-shadow: inset 0 0 0 0 #000000;
	transition-duration: 0.3s;
	transition-timing-function: ease-in;

}
.load:hover {
	transition-duration: 0.3s;
	box-shadow: inset 0 -3px 0 0 #000000;
}
	<button class="load"> Home
  	</button>

The shadow comes from the bottom and 3px into the button. I want it to be able to come from left to right, but still remaining at the 3px height.

I'm also pretty sure this website got it working, but i'm not able to extract the required CSS from inspecting it.

Website

Thanks!

Upvotes: 2

Views: 1673

Answers (1)

Roy
Roy

Reputation: 8089

You can do this using the :after attribute. See my example below. The width of the after element changes between 0 and 100% to get the effect. You can tweak the settings of .home-link:after easily to your needs.

Using only box-shadow is not the best way and surely not the best practise for this effect.

.home-link {
  position: relative;
  background: none;
  border: none;
  font-size: 1em;
  color: blue;
  width: 80px;
  text-align: center;
  margin: 0;
  padding: 0;
}

.home-link:after {
  position: absolute;
  bottom: 0;
  content: '';
  display: block;
  width: 0;
  height: 3px;
  background: #000;
  -webkit-transition: width .2s ease-in-out;
  transition: width .2s ease-in-out;
}

.home-link:hover:after {
  width: 100%;
}
<button class="home-link">Home</button>

Upvotes: 2

Related Questions