<h1>Click on the button š</h1>
<input type="checkbox" id="mycheckbox">
<label for="mycheckbox" class="feedback-label">FEEDBACK</label>
<form class="form" action="">
<div>
<label for="fullname">Full Name</label>
<input type="text" id="fullname">
</div>
<div>
<label for="email">Email</label>
<input type="email" id="email">
</div>
<div>
<label for="comment">Comment</label>
<textarea id="comment"></textarea>
</div>
<div>
<button type="submit">Send</button>
</div>
</form>
<footer class="page-footer">
<small>Made with <span>ā¤</span> by <a href="http://georgemartsoukos.com/" target="_blank">George Martsoukos</a>
</small>
</footer>
/* RESET RULES
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā */
:root {
--white: white;
--gradient: linear-gradient(-45deg, #ffa600 0%, #ff5e03 50%);
--form: #eeefef;
--border-radius: 4px;
--form-width: 500px;
--form-mob-width: 320px;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
color: inherit;
}
button,
label {
cursor: pointer;
}
label {
display: block;
}
button,
input,
textarea {
font-family: inherit;
font-size: 100%;
border: none;
}
textarea {
resize: none;
}
body {
font: 20px/1.5 sans-serif;
background: var(--white);
}
h1 {
font-size: 2rem;
text-align: center;
margin-top: 20vh;
}
/* FORM
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā */
[type="checkbox"] {
position: absolute;
left: -9999px;
}
.feedback-label,
.form {
position: fixed;
top: 50%;
right: 0;
backface-visibility: hidden;
}
.feedback-label {
transform-origin: top right;
transform: rotate(-90deg) translate(50%, -100%);
/*uncomment this if you want to reverse the order of the characters*/
/*transform: rotate(90deg) translateX(50%);*/
z-index: 2;
}
.form {
width: var(--form-width);
max-height: 90vh;
transform: translate(100%, -50%);
padding: 30px;
overflow: auto;
background: var(--form);
z-index: 1;
}
.feedback-label,
.form,
.form button {
transition: all 0.35s ease-in-out;
}
.feedback-label,
.form input,
.form textarea,
.form button {
border-radius: var(--border-radius);
}
.feedback-label,
.form button {
background: var(--gradient);
color: var(--white);
}
.feedback-label:hover,
.form button:hover {
filter: hue-rotate(-45deg);
}
.feedback-label {
padding: 5px 10px;
border-radius: var(--border-radius) var(--border-radius) 0 0;
}
form div:not(:last-child) {
margin-bottom: 20px;
}
form div:last-child {
text-align: right;
}
.form input,
.form textarea {
padding: 0 5px;
width: 100%;
}
.form button {
padding: 10px 20px;
width: 50%;
max-width: 120px;
}
.form input {
height: 40px;
}
.form textarea {
height: 220px;
}
[type="checkbox"]:checked + .feedback-label {
/*EDGE is buggy with calc + variables + transform - use a hardcoded value instead of variables*/
transform: rotate(-90deg) translate(50%, calc((var(--form-width) + 100%) * -1));
/*uncomment this if you want to reverse the order of the characters*/
/*transform: rotate(90deg) translate(50%, var(--form-width));*/
}
[type="checkbox"]:focus + .feedback-label {
outline: 2px solid rgb(77, 144, 254);
}
[type="checkbox"]:checked ~ .form {
transform: translate(0, -50%);
}
/* MQ
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā */
@media screen and (max-width: 600px) {
body {
font-size: 16px;
}
.form {
padding: 15px;
width: var(--form-mob-width);
}
form div:not(:last-child) {
margin-bottom: 10px;
}
[type="checkbox"]:checked + .feedback-label {
transform: rotate(-90deg) translate(50%, calc((var(--form-mob-width) + 100%) * -1));
/*uncomment this if you want to reverse the order of the characters*/
/*transform: rotate(90deg) translate(50%, var(--form-mob-width));*/
}
}
/* FOOTER
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā */
.page-footer {
position: absolute;
right: 10px;
bottom: 10px;
font-size: 0.85rem;
color: var(--black);
}
.page-footer span {
color: #e31b23;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.