Menu
Community /Pin to ProfileBookmark
@cootheadSep 23.2019 — #Hi there RaulRogojan,
instead of _animation_ use _transition_ , which works in and **out**. ;)
Also note that the _placeholder attribute_
**is not a replacement** for the _label attribute_.
**Further reading:-**
[url=https://duckduckgo.com/?q=placeholder+not+a+replacement+for+label&t=ffab&ia=web][color=#069]Placehoder is not a replacement for label[/color] [/url]
_coothead_
Reverse Animation when out o hover
I have this animation on hover
How can I make it run in reverse when out of hover?
Sign in
to post a comment6 Comments(s) ↴
0
@cootheadSep 23.2019 — #Hi there RaulRogojan,instead of _animation_ use _transition_ , which works in and **out**. ;)
``<i>
</i><!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
body {
background: #fbb03b;
font: normal 1em / 1.5em BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
}
form {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 20p;
}
form input {
width: 280px;
font-size: 20px;
padding: 5px 10px;
border: none;
border-bottom: 2px solid #222;
background: transparent;
}
form label {
width: 280px;
color: #fff;
text-align:left;
}
form input::placeholder {
color: rgba(0, 0, 0, 0.3);
font-weight: 700;
}
form input:focus {
outline: none;
border-bottom: 3px solid #ff4800;
}
form button {
position: relative;
margin-top: 20px;
background: white;
color: #fbb03b;
font-size: 18px;
border: none;
border-radius: 50px;
font-weight: 500;
text-transform: uppercase;
width: 180px;
height: 45px;
outline: none;
transition: 200ms ease-in-out;
}
form button:hover,
form button:active {
color: #fff;
background: transparent;
}
form button:hover::after,
form button:active::after {
opacity: 1;
width: 180px;
height: 45px;
}
form button::after {
content: "";
position: absolute;
width: 220px;
height: 55px;
border: 2px solid #fff;
border-radius: 50px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: 200ms ease-in-out;
}
</style>
</head>
<body>
<form>
<label for="em">Email:</label>
<input id="em" type="email" placeholder="Enter your email">
<button type="submit">Submit</button>
</form>
</body>
</html><i>
</i>``Also note that the _placeholder attribute_
**is not a replacement** for the _label attribute_.
**Further reading:-**
_coothead_