Ryan O

Tag: CSS

  • A Better Underline Transition

    Saw this on an e-com form that worked REALLY well. It even handled the line break 👍

    span {
	background-repeat: no-repeat;
	background-size: 0 2px;
	background-image: linear-gradient(to right,#000 0,#000 100%);
	-webkit-transition: background-size .55s cubic-bezier(.2,.75,.5,1);
	transition: background-size .55s cubic-bezier(.2,.75,.5,1);
	background-position: left bottom;
}

span:hover {
	background-size: 100% 2px;
}

    (must target inline element)