Line Test

by Bright RYMER

HTML

<html lang="en">
<head>
</head>
<body>
    <button id="connectbtn">
        test
    </button>
</body>
</html>

CSS

#connectbtn {
    text-align: center;
    color: red;
}

#connectbtn:before {
  	content: "";
  	position: absolute;
  	width: 100%;
  	height: 1%;
  	background-color: tomato;
  	visibility: hidden;
  	transform: scaleX(0);
  	transition: all 0.15s ease-in-out 0s;
}

#connectbtn:hover:before {
  	visibility: visible;
  	transform: scaleX(1);
}