Opened with :hover.
See the result of this example on CodePen.
Opened with :hover.
See the result of this example on CodePen.
<div id="box"> | |
<h1>NEWSLETTER</h1> | |
<div id="content"> | |
<p>Subscribe below to receive our news</p> | |
<input type="email" placeholder="your e-mail" /> | |
<button type="submit">OK</button> | |
</div> | |
</div> |
* { border: 0; margin: 0; padding: 0; } | |
/* style */ | |
body { background: #222; } | |
input { | |
padding: 5px; | |
background: #fff; | |
width: 180px; | |
} | |
button { | |
background: #115582; | |
color: #fff; | |
padding: 4px; | |
} | |
/* end - style */ | |
#box { | |
width: 300px; | |
height: 100px; | |
position: fixed; | |
right: -278px; /* hidden */ | |
top: 60px; | |
/* style */ | |
background: #0A2538; | |
transition: all 0.7s ease; | |
color: #fff; | |
padding: 15px; | |
} | |
#box:hover { right: 0; } | |
#content { | |
float: right; | |
width: 240px; | |
/* style */ | |
margin-top: 7px; | |
} | |
p { | |
margin-bottom: 12px; | |
/* style */ | |
text-align: center; | |
line-height: 22px; | |
} | |
h1 { | |
float: left; | |
width: 28px; | |
transform: rotate(-90deg); | |
margin: 75px 0; | |
/* style */ | |
font-size: 13px; | |
font-weight: bold; | |
} |