Is thre a way to create such effects like in the link below using input[type="submit"]? I am aware that I can't use input[type="submit"]:after.
The link: https://codepen.io/sazzad/pen/yNNNJG
you can use gradient and animate background-size and/or background-position:
input[type="submit"] {
border:2px solid pink;
padding:5px 20px;
font-size:30px;
background:linear-gradient(pink,pink) center/100% 0px no-repeat;
transition:0.5s all linear;
}
input[type="submit"]:hover {
background-size:100% 100%;
}<input type="submit" value="submit" >Another example:
input[type="submit"] {
border:2px solid pink;
padding:5px 20px;
font-size:30px;
background:repeating-linear-gradient(to right,pink 0,pink 4px,transparent 4px, transparent 8px) center/0px 100% no-repeat;
transition:0.5s all linear;
}
input[type="submit"]:hover {
background-size:100% 100%;
}<input type="submit" value="submit" >Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments