I am trying to follow a tutorial so that when an input is selected the label rises and the line changes color. The problem is it creates a second line that displays in the middle of the input.
It should display like the one on this site here
I tried comparing the code then typed it exactly and it still isn't working.
My code is
html,
body {
height: 100%;
}
body {
display: grid;
font-family: Avenir;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
}
* {
box-sizing: border-box;
}
.inp {
position: relative;
margin: auto;
width: 100%;
max-width: 280px;
}
.inp .label {
position: absolute;
top: 16px;
left: 0;
font-size: 16px;
color: #9098a9;
font-weight: 500;
transform-origin: 0 0;
transition: all 0.2s ease;
}
.inp .border {
position: absolute;
bottom: 0;
left: 0;
height: 2px;
width: 100%;
background: #07f;
transform: scaleX(0);
transform-origin: 0 0;
transition: all 0.15s ease;
}
.inp input {
-webkit-appearance: none;
width: 100%;
border: 0;
font-family: inherit;
padding: 12px 0;
height: 48px;
font-size: 16px;
font-weight: 500;
border-bottom: 2px solid #c8ccd4;
background: none;
border-radius: 0;
color: #223254;
transition: all 0.15s ease;
}
.inp input:hover {
background: rgba(34,50,84,0.03);
}
.inp input:not(:placeholder-shown) + span {
color: #5a667f;
transform: translateY(-26px) scale(0.75);
}
.inp input:focus {
background: none;
outline: none;
}
.inp input:focus + span {
color: #07f;
transform: translateY(-26px) scale(0.75);
}
.inp input:focus + span + .border {
transform: scaleX(1);
}
<!DOCTYPE html>
<html>
<head>
. . .
</head>
<body bgcolor="#f4b942">
<div>
<label for="inp" class="inp">
<input type="text" id="inp" placeholder=" ">
<span class="label">Insert Values</span>
<span class="border"></span>
</label>
</div>
</body>
</html>
Your code is not exactly same as the example link you mentioned. You have added <label> inside a <div>. <div> has a default display: block which is caused this issue. So there are two options 1) Remove <div> 2) Add change display: block to some other values like display: flex. It will work.
Below is code:
html,
body {
height: 100%;
}
body {
display: grid;
font-family: Avenir;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
}
* {
box-sizing: border-box;
}
.div {
display: flex;
}
.inp {
position: relative;
margin: auto;
width: 100%;
max-width: 280px;
}
.inp .label {
position: absolute;
top: 16px;
left: 0;
font-size: 16px;
color: #9098a9;
font-weight: 500;
transform-origin: 0 0;
transition: all 0.2s ease;
}
.inp .border {
position: absolute;
bottom: 0;
left: 0;
height: 2px;
width: 100%;
background: #07f;
transform: scaleX(0);
transform-origin: 0 0;
transition: all 0.15s ease;
}
.inp input {
-webkit-appearance: none;
width: 100%;
border: 0;
font-family: inherit;
padding: 12px 0;
height: 48px;
font-size: 16px;
font-weight: 500;
border-bottom: 2px solid #c8ccd4;
background: none;
border-radius: 0;
color: #223254;
transition: all 0.15s ease;
}
.inp input:hover {
background: rgba(34, 50, 84, 0.03);
}
.inp input:not(:placeholder-shown)+span {
color: #5a667f;
transform: translateY(-26px) scale(0.75);
}
.inp input:focus {
background: none;
outline: none;
}
.inp input:focus+span {
color: #07f;
transform: translateY(-26px) scale(0.75);
}
<!DOCTYPE html>
<html>
<head>
. . .
</head>
<body bgcolor="#f4b942">
<div class="div">
<label for="inp" class="inp">
<input type="text" id="inp" placeholder=" ">
<span class="label">Insert Values</span>
<span class="border"></span>
</label>
</div>
</body>
</html>
Related
just a relative simple question I think but can't find what to change. I you click to this input field you get a gradient color on the bottom of the field. I need to add something to get a red gradient color to the bottom when the page is loaded (so not clicked), when there is clicked the gradient changes to that yellow to pink gradient. thanks in advance!
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body, html {
height: 100%;
font-family: Poppins-Regular, sans-serif;
}
/*---------------------------------------------*/
a {
font-family: Poppins-Regular;
font-size: 14px;
line-height: 1.7;
color: #666666;
margin: 0px;
transition: all 0.4s;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
}
a:focus {
outline: none !important;
}
a:hover {
text-decoration: none;
color: #6a7dfe;
color: -webkit-linear-gradient(left, #21d4fd, #b721ff);
color: -o-linear-gradient(left, #21d4fd, #b721ff);
color: -moz-linear-gradient(left, #21d4fd, #b721ff);
color: linear-gradient(left, #21d4fd, #b721ff);
}
/*---------------------------------------------*/
h1,h2,h3,h4,h5,h6 {
margin: 0px;
}
p {
font-family: Poppins-Regular;
font-size: 14px;
line-height: 1.7;
color: #666666;
margin: 0px;
}
ul, li {
margin: 0px;
list-style-type: none;
}
/*---------------------------------------------*/
input {
outline: none;
border: none;
}
textarea {
outline: none;
border: none;
}
textarea:focus, input:focus {
border-color: transparent !important;
}
/*------------------------------------------------------------------
[ Input ]*/
.wrap-input100 {
width: 100%;
position: relative;
border-bottom: 2px solid #adadad;
margin-bottom: 37px;
}
.input100 {
font-family: Poppins-Regular;
font-size: 15px;
color: #555555;
line-height: 1.2;
display: block;
width: 100%;
height: 45px;
background: transparent;
padding: 0 5px;
}
/*---------------------------------------------*/
.focus-input100 {
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
}
.focus-input100::before {
content: "";
display: block;
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
background: #6a7dfe;
background: -webkit-linear-gradient(left, yellow, #b721ff);
background: -o-linear-gradient(left, yellow, #b721ff);
background: -moz-linear-gradient(left, yellow, #b721ff);
background: linear-gradient(left, yellow, #b721ff);
}
.focus-input100::after {
font-family: Poppins-Regular;
font-size: 15px;
color: #999999;
line-height: 1.2;
content: attr(data-placeholder);
display: block;
width: 100%;
position: absolute;
top: 16px;
left: 0px;
padding-left: 5px;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
}
.input100:focus + .focus-input100::after {
top: -15px;
}
.input100:focus + .focus-input100::before {
width: 100%;
}
.has-val.input100 + .focus-input100::after {
top: -15px;
}
.has-val.input100 + .focus-input100::before {
width: 100%;
}
/*------------------------------------------------------------------
[ Responsive ]*/
#media (max-width: 576px) {
.wrap-login100 {
padding: 77px 15px 33px 15px;
}
}
/*------------------------------------------------------------------
[ Alert validate ]*/
.validate-input {
position: relative;
}
.alert-validate::before {
content: attr(data-validate);
position: absolute;
max-width: 70%;
background-color: #fff;
border: 1px solid #c80000;
border-radius: 2px;
padding: 4px 25px 4px 10px;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
right: 0px;
pointer-events: none;
font-family: Poppins-Regular;
color: #c80000;
font-size: 13px;
line-height: 1.4;
text-align: left;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 0.4s;
-o-transition: opacity 0.4s;
-moz-transition: opacity 0.4s;
transition: opacity 0.4s;
}
.alert-validate::after {
content: "\f06a";
font-family: FontAwesome;
font-size: 16px;
color: #c80000;
display: block;
position: absolute;
background-color: #fff;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
right: 5px;
}
.alert-validate:hover:before {
visibility: visible;
opacity: 1;
}
.limiter {
width: 20%;
padding-top: 5%;
}
<div class="limiter">
<div class="wrap-input100 validate-input">
<span class="btn-show-pass">
<i class="zmdi zmdi-eye"></i>
</span>
<input class="input100" type="password" name="password">
<span class="focus-input100" data-placeholder="wachtwoord"></span>
</div>
</div>
Add CSS border-image and border-image-slice properties to the .wrap-input100 class
.wrap-input100 {
width: 100%;
position: relative;
margin-bottom: 37px;
border-bottom: 2px solid transparent;
border-image: linear-gradient(to right, #b721ff 0%, red 100%);
border-image-slice: 1;
}
I am a beginner of HTML and CSS. I am learning web development recently and trying to make a simple website page. On that page, there will be two sidebars. One is left side bar, other one is right side bar. But when i click on left sidebar menu icon, it opens both left and right sidebar, but i want to open only left one. And when i click on right sidebar menu icon, it only opens right sidebar. What am i doing wrong here ?
html,
body {
overflow-x: hidden;
height: 100%;
}
body {
background: white;
padding: 0;
margin: 0;
font-family: tahoma;
}
body {
background-image: url(scene.jpg);
background-size: cover;
background-position: center;
}
.header {
display: block;
margin: 0 auto;
width: 100%;
max-width: 100%;
box-shadow: none;
background-color: #000000;
position: fixed;
height: 60px !important;
overflow: hidden;
z-index: 10;
}
.main {
margin: 0 auto;
display: block;
height: 100%;
margin-top: 60px;
}
.mainInner {
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.sidebarMenu {
height: 100%;
position: fixed;
left: 0;
width: 250px;
margin-top: 60px;
transform: translateX(-250px);
transition: transform 250ms ease-in-out;
background: linear-gradient(180deg, #000000 0%, #3f5efb 100%);
}
.rightsidebarMenu {
height: 100%;
position: fixed;
right: 0;
width: 250px;
margin-top: 60px;
transform: translateX(250px);
transition: transform 250ms ease-in-out;
background: linear-gradient(180deg, #000000 0%, #3f5efb 100%);
}
.sidebarMenuInner {
margin: 0;
padding: 0;
border-top: 1px solid rgba (255, 255, 255, 0.10);
}
.rightsidebarMenuInner {
margin: 0;
padding: 0;
border-top: 1px solid rgba (255, 255, 255, 0.10);
}
.sidebarMenuInner li {
list-style: none;
color: white;
text-transform: uppercase;
font-weight: bold;
padding: 20px;
cursor: pointer;
border-bottom: 1px solid rgba (255, 255, 255, 0.10);
}
.rightsidebarMenuInner li {
list-style: none;
color: white;
text-transform: uppercase;
font-weight: bold;
padding: 20px;
cursor: pointer;
border-bottom: 1px solid rgba (255, 255, 255, 0.10);
}
.sidebarMenuInner li a {
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
text-decoration: none;
color: white;
border: 2px;
}
.rightsidebarMenuInner li a {
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
text-decoration: none;
color: white;
border: 2px;
}
.sidebarMenuInner li span {
display: block;
font-size: 14px;
color: rgba (255, 255, 255, 0.50);
}
.rightsidebarMenuInner li span {
display: block;
font-size: 14px;
color: rgba (255, 255, 255, 0.50);
}
input[type="checkbox"] {
transition: all 0.3s;
box-sizing: border-box;
display: none;
}
input[type="checkbox"] {
transition: all 0.3s;
box-sizing: border-box;
display: none;
}
input[type="checkbox"]:checked~.sidebarMenu {
transform: translateX(0);
}
input[type="checkbox"]:checked~.rightsidebarMenu {
transform: translateX(0);
}
.sidebarIconToggle {
transition: all 0.3s;
box-sizing: border-box;
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
top: 22px;
left: 35px;
height: 22px;
width: 22px;
}
.rightsidebarIconToggle {
transition: all 0.3s;
box-sizing: border-box;
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
top: 22px;
right: 35px;
height: 22px;
width: 22px;
}
.spinner {
transition: all 0.3s;
box-sizing: border-box;
position: absolute;
height: 3px;
width: 100%;
background-color: white;
}
.right.spinner {
transition: all 0.3s;
box-sizing: border-box;
position: absolute;
height: 3px;
width: 100%;
background-color: white;
}
.horizontal {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
.right.horizontal {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: right;
margin-top: 3px;
}
.diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
}
.right.diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: right;
}
.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
.right.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: right;
margin-top: 3px;
}
input[type="checkbox"]:checked~.sidebarIconToggle>.horizontal {
transition: all 0.3s;
box-sizing: border-box;
opacity: 0;
}
input[type="checkbox"]:checked~.sidebarIconToggle>.diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(135deg);
margin-top: 8px;
}
input[type="checkbox"]:checked~.sidebarIconToggle>.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(-135deg);
margin-top: -8px;
}
input[type="checkbox"]:checked~.rightsidebarIconToggle>.right.horizontal {
transition: all 0.3s;
box-sizing: border-box;
opacity: 0;
}
input[type="checkbox"]:checked~.rightsidebarIconToggle>.right.diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(135deg);
margin-top: 8px;
}
input[type="checkbox"]:checked~.rightsidebarIconToggle>.right.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(-135deg);
margin-top: -8px;
}
<div class="header"></div>
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
<label for="openSidebarMenu" class="sidebarIconToggle">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>
<div class="sidebarMenu">
<ul class="sidebarMenuInner">
<li>Munem Sohan <span>Web Developer</span></li>
<li><span>Company</span></li>
<li><span>Facebook</span></li>
<li><span>Twitter</span></li>
</ul>
</div>
<input type="checkbox" class="rightopenSidebarMenu" id="rightopenSidebarMenu">
<label for="rightopenSidebarMenu" class="rightsidebarIconToggle">
<div class="right spinner diagonal part-1"></div>
<div class="right spinner horizontal"></div>
<div class="right spinner diagonal part-2"></div>
</label>
<div class="rightsidebarMenu">
<ul class="rightsidebarMenuInner">
<li>Sohan <span>Web Developer</span></li>
<li><span>Sabbir</span></li>
<li><span>Sumi</span></li>
<li><span>Shovon</span></li>
</ul>
</div>
You need to add id with checkbox, so it can apply checkbox uniquely for opening toggle
html,
body {
overflow-x: hidden;
height: 100%;
}
body {
background: white;
padding: 0;
margin: 0;
font-family: tahoma;
}
body {
background-image: url(scene.jpg);
background-size: cover;
background-position: center;
}
.header {
display: block;
margin: 0 auto;
width: 100%;
max-width: 100%;
box-shadow: none;
background-color: #000000;
position: fixed;
height: 60px !important;
overflow: hidden;
z-index: 10;
}
.main {
margin: 0 auto;
display: block;
height: 100%;
margin-top: 60px;
}
.mainInner {
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.sidebarMenu {
height: 100%;
position: fixed;
left: 0;
width: 250px;
margin-top: 60px;
transform: translateX(-250px);
transition: transform 250ms ease-in-out;
background: linear-gradient(180deg, #000000 0%, #3f5efb 100%);
}
.rightsidebarMenu {
height: 100%;
position: fixed;
right: 0;
width: 250px;
margin-top: 60px;
transform: translateX(250px);
transition: transform 250ms ease-in-out;
background: linear-gradient(180deg, #000000 0%, #3f5efb 100%);
}
.sidebarMenuInner {
margin: 0;
padding: 0;
border-top: 1px solid rgba (255, 255, 255, 0.10);
}
.rightsidebarMenuInner {
margin: 0;
padding: 0;
border-top: 1px solid rgba (255, 255, 255, 0.10);
}
.sidebarMenuInner li {
list-style: none;
color: white;
text-transform: uppercase;
font-weight: bold;
padding: 20px;
cursor: pointer;
border-bottom: 1px solid rgba (255, 255, 255, 0.10);
}
.rightsidebarMenuInner li {
list-style: none;
color: white;
text-transform: uppercase;
font-weight: bold;
padding: 20px;
cursor: pointer;
border-bottom: 1px solid rgba (255, 255, 255, 0.10);
}
.sidebarMenuInner li a {
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
text-decoration: none;
color: white;
border: 2px;
}
.rightsidebarMenuInner li a {
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
text-decoration: none;
color: white;
border: 2px;
}
.sidebarMenuInner li span {
display: block;
font-size: 14px;
color: rgba (255, 255, 255, 0.50);
}
.rightsidebarMenuInner li span {
display: block;
font-size: 14px;
color: rgba (255, 255, 255, 0.50);
}
input[type="checkbox"] {
transition: all 0.3s;
box-sizing: border-box;
display: none;
}
input[type="checkbox"] {
transition: all 0.3s;
box-sizing: border-box;
display: none;
}
input[type="checkbox"]#openSidebarMenu:checked~.sidebarMenu {
transform: translateX(0);
}
input[type="checkbox"]#rightopenSidebarMenu:checked~.rightsidebarMenu {
transform: translateX(0);
}
.sidebarIconToggle {
transition: all 0.3s;
box-sizing: border-box;
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
top: 22px;
left: 35px;
height: 22px;
width: 22px;
}
.rightsidebarIconToggle {
transition: all 0.3s;
box-sizing: border-box;
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
top: 22px;
right: 35px;
height: 22px;
width: 22px;
}
.spinner {
transition: all 0.3s;
box-sizing: border-box;
position: absolute;
height: 3px;
width: 100%;
background-color: white;
}
.right.spinner {
transition: all 0.3s;
box-sizing: border-box;
position: absolute;
height: 3px;
width: 100%;
background-color: white;
}
.horizontal {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
.right.horizontal {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: right;
margin-top: 3px;
}
.diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
}
.right.diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: right;
}
.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
.right.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: right;
margin-top: 3px;
}
input[type="checkbox"]#openSidebarMenu:checked~.sidebarIconToggle>.horizontal {
transition: all 0.3s;
box-sizing: border-box;
opacity: 0;
}
input[type="checkbox"]#openSidebarMenu:checked~.sidebarIconToggle>.diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(135deg);
margin-top: 8px;
}
input[type="checkbox"]#openSidebarMenu:checked~.sidebarIconToggle>.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(-135deg);
margin-top: -8px;
}
input[type="checkbox"]#rightopenSidebarMenu:checked~.rightsidebarIconToggle>.right.horizontal {
transition: all 0.3s;
box-sizing: border-box;
opacity: 0;
}
input[type="checkbox"]#rightopenSidebarMenu:checked~.rightsidebarIconToggle>.right.diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(135deg);
margin-top: 8px;
}
input[type="checkbox"]#rightopenSidebarMenu:checked~.rightsidebarIconToggle>.right.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(-135deg);
margin-top: -8px;
}
<div class="header"></div>
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
<label for="openSidebarMenu" class="sidebarIconToggle">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>
<div class="sidebarMenu">
<ul class="sidebarMenuInner">
<li>Munem Sohan <span>Web Developer</span></li>
<li><span>Company</span></li>
<li><span>Facebook</span></li>
<li><span>Twitter</span></li>
</ul>
</div>
<input type="checkbox" class="rightopenSidebarMenu" id="rightopenSidebarMenu">
<label for="rightopenSidebarMenu" class="rightsidebarIconToggle">
<div class="right spinner diagonal part-1"></div>
<div class="right spinner horizontal"></div>
<div class="right spinner diagonal part-2"></div>
</label>
<div class="rightsidebarMenu">
<ul class="rightsidebarMenuInner">
<li>Sohan <span>Web Developer</span></li>
<li><span>Sabbir</span></li>
<li><span>Sumi</span></li>
<li><span>Shovon</span></li>
</ul>
</div>
in this authentication page i want to do a background with 5 images rolling in 3 seconds, it works but also my auth form appears between every image and disappear when other image appear.
here the Fiddle with my html and css just to show you the code better, it doesn't work there because i have the images in my local path.
HTML:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"/>
</head>
<body>
<div class="center">
<h1>Benvenuto!</h1>
<h3>Accedi con le tue credenziali</h3>
</div>
<form style="background-color: white">
<div class="group">
<input [(ngModel)]="user.email" name="email" type="email"><span class="highlight"></span><span
class="bar"></span>
<label>Email</label>
</div>
<div class="group">
<input [(ngModel)]="user.password" name="password" type="password"><span
class="highlight"></span><span
class="bar"></span>
<label>Password</label>
</div>
<button (click)="signin()" type="button" class="button buttonBlue">Accedi
<div class="ripples buttonRipples"><span class="ripplesCircle"></span>
</div>
</button>
</form>
<div class="crossfade">
<figure></figure>
<figure></figure>
<figure></figure>
<figure></figure>
<figure></figure>
</div>
</body>
</html>
CSS:
.crossfade > figure {
animation: imageAnimation 15s linear infinite 0s;
backface-visibility: hidden;
background-size: cover;
background-position: center center;
color: transparent;
height: 100%;
left: 0px;
opacity: 0;
position: fixed;
top: 0px;
width: 100%;
z-index: 0;
}
.crossfade > figure:nth-child(1) { background-image: url('../../../img/login/bath-bathroom-candlelight-3188.jpg'); }
.crossfade > figure:nth-child(2) {
animation-delay: 3s;
background-image: url('../../../img/login/bath-blur-brush-275765.jpg');
}
.crossfade > figure:nth-child(3) {
animation-delay: 6s;
background-image: url('../../../img/login/beauty-face-massage-56884.jpg');
}
.crossfade > figure:nth-child(4) {
animation-delay: 9s;
background-image: url('../../../img/login/bed-bedroom-blanket-275845.jpg');
}
.crossfade > figure:nth-child(5) {
animation-delay: 12s;
background-image: url('../../../img/login/body-massage-relax-7700.jpg');
}
#keyframes
imageAnimation { 0% {
animation-timing-function: ease-in;
opacity: 0;
}
8% {
animation-timing-function: ease-out;
opacity: 1;
}
17% {
opacity: 1
}
25% {
opacity: 0
}
100% {
opacity: 0
}
}
* { box-sizing:border-box; }
body {
font-family: Helvetica;
background: #eee;
-webkit-font-smoothing: antialiased;
}
hgroup {
text-align:center;
margin-top: 4em;
}
h1, h3 { font-weight: 300; }
h1 { color: #636363; }
h3 { color: #4a89dc; }
.center{
width: 380px;
margin: 4em auto;
padding: 3em 2em 2em 2em;
}
form {
width: 380px;
margin: 4em auto;
padding: 3em 2em 2em 2em;
background: #fafafa;
border: 1px solid #ebebeb;
box-shadow: rgba(0,0,0,0.14902) 0px 1px 1px 0px,rgba(0,0,0,0.09804) 0px 1px 2px 0px;
}
.group {
position: relative;
margin-bottom: 45px;
}
input {
font-size: 18px;
padding: 10px 10px 10px 5px;
-webkit-appearance: none;
display: block;
background: #fafafa;
color: #636363;
width: 100%;
border: none;
border-radius: 0;
border-bottom: 1px solid #757575;
}
input:focus { outline: none; }
/*/* Label */
label {
color: #999;
font-size: 18px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
top: 10px;
transition: all 0.2s ease;
}
/*/* active */
input:focus ~ label, input.used ~ label {
top: -20px;
transform: scale(.75); left: -2px;
/* font-size: 14px; */
color: #4a89dc;
}
/*/* Underline */
.bar {
position: relative;
display: block;
width: 100%;
}
.bar:before, .bar:after {
content: '';
height: 2px;
width: 0;
bottom: 1px;
position: absolute;
background: #4a89dc;
transition: all 0.2s ease;
}
.bar:before { left: 50%; }
.bar:after { right: 50%; }
/* active */
input:focus ~ .bar:before, input:focus ~ .bar:after { width: 50%; }
/* Highlight */
.highlight {
position: absolute;
height: 60%;
width: 100px;
top: 25%;
left: 0;
pointer-events: none;
opacity: 0.5;
}
/* active */
input:focus ~ .highlight {
animation: inputHighlighter 0.3s ease;
}
/* Animations */
#keyframes inputHighlighter {
from { background: #4a89dc; }
to { width: 0; background: transparent; }
}
/* Button */
.button {
position: relative;
display: inline-block;
padding: 12px 24px;
margin: .3em 0 1em 0;
width: 100%;
vertical-align: middle;
color: #fff;
font-size: 16px;
line-height: 20px;
-webkit-font-smoothing: antialiased;
text-align: center;
letter-spacing: 1px;
background: transparent;
border: 0;
border-bottom: 2px solid #3160B6;
cursor: pointer;
transition: all 0.15s ease;
}
.button:focus { outline: 0; }
/* Button modifiers */
.buttonBlue {
background: #4a89dc;
text-shadow: 1px 1px 0 rgba(39, 110, 204, .5);
}
.buttonBlue:hover { background: #357bd8; }
/* Ripples container */
.ripples {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: transparent;
}
/* Ripples circle */
.ripplesCircle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.25);
}
.ripples.is-active .ripplesCircle {
animation: ripples .4s ease-in;
}
/* Ripples animation */
#keyframes ripples {
0% { opacity: 0; }
25% { opacity: 1; }
100% {
width: 200%;
padding-bottom: 200%;
opacity: 0;
}
}
footer { text-align: center; }
footer p {
color: #888;
font-size: 13px;
letter-spacing: .4px;
}
footer a {
color: #4a89dc;
text-decoration: none;
transition: all .2s ease;
}
footer a:hover {
color: #666;
text-decoration: underline;
}
footer img {
width: 80px;
transition: all .2s ease;
}
footer img:hover { opacity: .83; }
footer img:focus , footer a:focus { outline: none; }
<!-- slideshow bckg -->
* {
padding: 0;
margin: 0
}
one solution is to add a div section to your crossfade too!
You just need to add the div section in your css and give the div a chance to show and disappear
.crossfade > figure {
animation: imageAnimation 18s linear infinite 0s;
backface-visibility: hidden;
background-size: cover;
background-position: center center;
color: transparent;
height: 100%;
left: 0px;
opacity: 0;
position: fixed;
top: 0px;
width: 100%;
z-index: 0;
}
.crossfade > div {
animation: imageAnimation 15s linear infinite 0s;
backface-visibility: hidden;
background-size: cover;
background-position: center center;
color: transparent;
height: 100%;
left: 0px;
opacity: 0;
position: fixed;
top: 0px;
width: 100%;
z-index: 0;
}
.crossfade > figure:nth-child(1) { background-image: url('https://www.uncommongoods.com/images/items/26500/26530_1_1200px.jpg'); }
.crossfade > figure:nth-child(2) {
animation-delay: 3s;
background-image: url('https://img1.southernliving.timeinc.net/sites/default/files/styles/4_3_horizontal_-_1200x900/public/image/2018/01/main/duck.jpg?itok=CHWo5-3d&1515187196');
}
.crossfade > figure:nth-child(3) {
animation-delay: 6s;
background-image: url('https://images-eu.ssl-images-amazon.com/images/I/41sfz8dKX1L._SL500_AC_SS350_.jpg');
}
.crossfade > figure:nth-child(4) {
animation-delay: 9s;
background-image: url('https://deltawaterfowl.org/wp-content/uploads/2017/04/mallard-web.jpg');
}
.crossfade > figure:nth-child(5) {
animation-delay: 12s;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/2/24/Male_mallard_duck_2.jpg');
}
.crossfade > div:nth-child(6) {
animation-delay: 15s;
}
#keyframes
imageAnimation { 0% {
animation-timing-function: ease-in;
opacity: 0;
}
8% {
animation-timing-function: ease-out;
opacity: 1;
}
17% {
opacity: 1
}
25% {
opacity: 0
}
100% {
opacity: 0
}
}
* { box-sizing:border-box; }
body {
font-family: Helvetica;
background: #eee;
-webkit-font-smoothing: antialiased;
}
hgroup {
text-align:center;
margin-top: 4em;
}
h1, h3 { font-weight: 300; }
h1 { color: #636363; }
h3 { color: #4a89dc; }
.center{
width: 380px;
margin: 4em auto;
padding: 3em 2em 2em 2em;
}
form {
width: 380px;
margin: 4em auto;
padding: 3em 2em 2em 2em;
background: #fafafa;
border: 1px solid #ebebeb;
box-shadow: rgba(0,0,0,0.14902) 0px 1px 1px 0px,rgba(0,0,0,0.09804) 0px 1px 2px 0px;
}
.group {
position: relative;
margin-bottom: 45px;
}
input {
font-size: 18px;
padding: 10px 10px 10px 5px;
-webkit-appearance: none;
display: block;
background: #fafafa;
color: #636363;
width: 100%;
border: none;
border-radius: 0;
border-bottom: 1px solid #757575;
}
input:focus { outline: none; }
/*/* Label */
label {
color: #999;
font-size: 18px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
top: 10px;
transition: all 0.2s ease;
}
/*/* active */
input:focus ~ label, input.used ~ label {
top: -20px;
transform: scale(.75); left: -2px;
/* font-size: 14px; */
color: #4a89dc;
}
/*/* Underline */
.bar {
position: relative;
display: block;
width: 100%;
}
.bar:before, .bar:after {
content: '';
height: 2px;
width: 0;
bottom: 1px;
position: absolute;
background: #4a89dc;
transition: all 0.2s ease;
}
.bar:before { left: 50%; }
.bar:after { right: 50%; }
/* active */
input:focus ~ .bar:before, input:focus ~ .bar:after { width: 50%; }
/* Highlight */
.highlight {
position: absolute;
height: 60%;
width: 100px;
top: 25%;
left: 0;
pointer-events: none;
opacity: 0.5;
}
/* active */
input:focus ~ .highlight {
animation: inputHighlighter 0.3s ease;
}
/* Animations */
#keyframes inputHighlighter {
from { background: #4a89dc; }
to { width: 0; background: transparent; }
}
/* Button */
.button {
position: relative;
display: inline-block;
padding: 12px 24px;
margin: .3em 0 1em 0;
width: 100%;
vertical-align: middle;
color: #fff;
font-size: 16px;
line-height: 20px;
-webkit-font-smoothing: antialiased;
text-align: center;
letter-spacing: 1px;
background: transparent;
border: 0;
border-bottom: 2px solid #3160B6;
cursor: pointer;
transition: all 0.15s ease;
}
.button:focus { outline: 0; }
/* Button modifiers */
.buttonBlue {
background: #4a89dc;
text-shadow: 1px 1px 0 rgba(39, 110, 204, .5);
}
.buttonBlue:hover { background: #357bd8; }
/* Ripples container */
.ripples {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: transparent;
}
/* Ripples circle */
.ripplesCircle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.25);
}
.ripples.is-active .ripplesCircle {
animation: ripples .4s ease-in;
}
/* Ripples animation */
#keyframes ripples {
0% { opacity: 0; }
25% { opacity: 1; }
100% {
width: 200%;
padding-bottom: 200%;
opacity: 0;
}
}
footer { text-align: center; }
footer p {
color: #888;
font-size: 13px;
letter-spacing: .4px;
}
footer a {
color: #4a89dc;
text-decoration: none;
transition: all .2s ease;
}
footer a:hover {
color: #666;
text-decoration: underline;
}
footer img {
width: 80px;
transition: all .2s ease;
}
footer img:hover { opacity: .83; }
footer img:focus , footer a:focus { outline: none; }
<!-- slideshow bckg -->
* {
padding: 0;
margin: 0
}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"/>
</head>
<body>
<div class="crossfade">
<figure></figure>
<figure></figure>
<figure></figure>
<figure></figure>
<figure></figure>
<div class="center">
<h1>Benvenuto!</h1>
<h3>Accedi con le tue credenziali</h3>
</div>
</div>
</body>
</html>
Have at it and goodluck :)
I am trying to mimic the hover transitions for buttons as found on this page.
I have the following so far:
.hs-button {
font-size: 16px;
font-family: "Raleway", sans-serif;
text-transform: uppercase;
line-height: 1em;
color: #333333;
letter-spacing: 0;
background: #fff336;
display: inline-block;
position: relative;
cursor: pointer;
-webkit-transition: 0.3s;
transition: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
input[type="submit"]:hover {
text-decoration: none;
transform: translateY(0px);
-webkit-transform: translateY(0px);
}
input[type="submit"]:hover {
border: 3px solid #000;
background-color: #000;
color: #fff336;
}
input[type="submit"]:hover:after {
height: 100%;
}
input[type="submit"]:after {
content: "";
background: #000;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
z-index: -1;
-webkit-transition: 0.3s;
transition: 0.3s;
}
<div class="hs_submit">
<div class="actions">
<input type="submit" value="DOWNLOAD NOW!" class="hs-button primary large">
</div>
</div>
The above button is the only button on my page and with the following above code, I'd expect it the black background to hover from bottom to top, but it's not - why?
Edit:
[Preview link to page][2]
You don't have to use pseudo-element with input tag (Can I use a :before or :after pseudo-element on an input field?). Consider adding pseudo element on a container. Also remove the background of your input. It need to be transparent so you can see the effect of pseudo-element behind.
Here is an example:
.actions {
display:inline-block;
position:relative;
}
.hs-button {
font-size: 16px;
font-family: "Raleway", sans-serif;
text-transform: uppercase;
line-height: 1em;
color: #333333;
letter-spacing: 0;
padding:20px;
border:none;
display: inline-block;
position: relative;
cursor: pointer;
z-index:1;
}
.actions:hover input[type="submit"] {
color: #fff336;
background:transparent;
}
.actions:before {
content: "";
background: #000;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
z-index:0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.actions:hover::before {
height:100%;
}
<div class="hs_submit">
<div class="actions">
<input type="submit" value="DOWNLOAD NOW!" class="hs-button primary large">
</div>
</div>
input not support ::before ::after you can use
<Button>
than add ::before ::after .
LIke https://jsfiddle.net/ufL55gfw/1/
Try below
.slider-button {
margin-top: 70px;
}
#media (max-width: 1220px) {
.slider-button {
margin-top: 30px;
}
}
.slider-button .button {
text-align: left;
}
#media (max-width: 1220px) {
.slider-button .button {
text-align: center;
}
}
.slider-button .button {
text-align: left;
}
.button {
text-align: center;
}
.button a{text-decoration:none;}
.button__item {
font-family: "Raleway", sans-serif;
font-weight: 500;
text-transform: uppercase;
font-size: 1.313rem;
line-height: 1em;
color: #333333;
letter-spacing: 0;
background: #fff336;
padding: 32.5px 65px;
display: inline-block;
position: relative;
cursor: pointer;
-webkit-transition: 0.3s;
transition: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.button__item:hover {
text-decoration: none;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
.button__item:hover:after {
height: 100%;
}
.button__item:after {
content: "";
background: #fff;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
z-index: -1;
-webkit-transition: 0.3s;
transition: 0.3s;
}
<div class="slider-button"><div class="button">DOWNLOAD NOW</div></div>
I'm new to programming. I'm interested in recreating the button effect from this codepen example. Codepen
When I copy the code from codepen and try to run the code in my Chrome browser, the button 1) did not have the border effect, 2) was not positioned in the middle of the screen, and 3) the background change effect did not show up.
Here is the code I try to run in my browser, which I borrow from this codepen aforementioned. Codepen
CSS
$alizarin: #e74c3c;
%vertical-align {
position: relative;
top: 50%;
transform: translateY(-50%);
}
*,
*::before,
*::after { box-sizing: border-box; }
html,
body {
width: 100%;
height: 100%;
}
body {
position: relative;
font-family: "Lato", "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-weight: 300;
text-align: center;
overflow: hidden;
background: url(http://magdeleine.co/wp-content/uploads/2015/01/tongariro-national-park-493289-1400x933.jpg) no-repeat center center;
background-size: cover;
&:after {
content: "";
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #2980b9 0%,#9B59B6 100%);
background-size: 100% auto;
opacity: 0;
transition: all .65s ease-in-out;
}
}
.blur:after { opacity: .85; }
.btn {
position: relative;
display: inline-block;
border: 6px solid lighten($alizarin, 10%);
#extend %vertical-align;
transition: all .1s ease-in-out;
z-index: 99;
&.active { box-shadow: 2px 2px 4px rgba(0,0,0, .25); }
&:focus,
&:hover { border: 12px solid $alizarin; }
}
.btn,
.btn > span {
cursor: pointer;
}
.btn > span {
min-width: 426px;
}
.btn-inr {
display: inline-block;
color: white;
font-weight: 100;
font-size: 2em;
line-height: 1;
text-transform: uppercase;
background: lighten($alizarin, 10%);
padding: 1em 2em;
margin: 6px;
transition: all .1s ease-in-out;
&:focus,
&:hover {
background: $alizarin;
padding: 1em 2em;
margin: 0;
}
}
.txt-a {
display: inline;
}
.txt-b {
display: none;
}
.btn:focus .btn-inr,
.btn:hover .btn-inr {
background: $alizarin;
padding: 1em 2em;
margin: 0;
}
.btn:focus .txt-a,
.btn:hover .txt-a { display: none; }
.btn:focus .txt-b,
.btn:hover .txt-b { display: inline; }
HTML
<a class="btn" data-js="btn">
<span class="btn-inr">
<span class="txt-a">See this button?</span>
<span class="txt-b">Now ya do.</span>
</span>
</a>
JavaScript
function toggleButton(el) {
var body = document.body;
var element = document.querySelector(el);
element.addEventListener('mouseenter', function(e) {
e.target.classList.add('active');
body.classList.add('blur');
}, false);
element.addEventListener('mouseleave', function(e) {
e.target.classList.remove('active');
body.classList.remove('blur');
}, false);
};
toggleButton('[data-js="btn"]');
Help is greatly appreciated. Thank you everyone!
the css you copied are some sort of SASS i think, you need to copy the compiled version of css
http://codepen.io/cdunnnnnnn/pen/FLsvf in the css column, there is a button say "view compiled", click on that and copy css again.
.btn {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
}
body {
position: relative;
font-family: "Lato", "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-weight: 300;
text-align: center;
overflow: hidden;
background: url(http://magdeleine.co/wp-content/uploads/2015/01/tongariro-national-park-493289-1400x933.jpg) no-repeat center center;
background-size: cover;
}
body:after {
content: "";
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background: -webkit-linear-gradient(315deg, #2980b9 0%, #9B59B6 100%);
background: linear-gradient(135deg, #2980b9 0%, #9B59B6 100%);
background-size: 100% auto;
opacity: 0;
-webkit-transition: all .65s ease-in-out;
transition: all .65s ease-in-out;
}
.blur:after {
opacity: .85;
}
.btn {
position: relative;
display: inline-block;
border: 6px solid #ed7669;
-webkit-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
z-index: 99;
}
.btn.active {
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
}
.btn:focus, .btn:hover {
border: 12px solid #e74c3c;
}
.btn,
.btn > span {
cursor: pointer;
}
.btn > span {
min-width: 426px;
}
.btn-inr {
display: inline-block;
color: white;
font-weight: 100;
font-size: 2em;
line-height: 1;
text-transform: uppercase;
background: #ed7669;
padding: 1em 2em;
margin: 6px;
-webkit-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
.btn-inr:focus, .btn-inr:hover {
background: #e74c3c;
padding: 1em 2em;
margin: 0;
}
.txt-a {
display: inline;
}
.txt-b {
display: none;
}
.btn:focus .btn-inr,
.btn:hover .btn-inr {
background: #e74c3c;
padding: 1em 2em;
margin: 0;
}
.btn:focus .txt-a,
.btn:hover .txt-a {
display: none;
}
.btn:focus .txt-b,
.btn:hover .txt-b {
display: inline;
}
You need to compile the SCSS code into pure CSS!
DEMO
// http://shoptalkshow.com/episodes/134-marc-grabanski/#t=16:07
// vanilla JS
function toggleButton(el) {
var body = document.body;
var element = document.querySelector(el);
element.addEventListener('mouseenter', function(e) {
e.target.classList.add('active');
body.classList.add('blur');
}, false);
element.addEventListener('mouseleave', function(e) {
e.target.classList.remove('active');
body.classList.remove('blur');
}, false);
};
toggleButton('[data-js="btn"]');
// jQuery
/*
$('[data-js="btn"]').hover(function(){
$(this).toggleClass('active');
if ($(this).hasClass('active')) {
$('body').addClass('blur');
} else {
$('body').removeClass('blur');
}
});
*/
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
.btn {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
}
body {
position: relative;
font-family: "Lato", "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-weight: 300;
text-align: center;
overflow: hidden;
background: url(http://magdeleine.co/wp-content/uploads/2015/01/tongariro-national-park-493289-1400x933.jpg) no-repeat center center;
background-size: cover;
}
body:after {
content: "";
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background: -webkit-linear-gradient(315deg, #2980b9 0%, #9B59B6 100%);
background: linear-gradient(135deg, #2980b9 0%, #9B59B6 100%);
background-size: 100% auto;
opacity: 0;
-webkit-transition: all .65s ease-in-out;
transition: all .65s ease-in-out;
}
.blur:after {
opacity: .85;
}
.btn {
position: relative;
display: inline-block;
border: 6px solid #ed7669;
-webkit-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
z-index: 99;
}
.btn.active {
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
}
.btn:focus,
.btn:hover {
border: 12px solid #e74c3c;
}
.btn,
.btn > span {
cursor: pointer;
}
.btn > span {
min-width: 426px;
}
.btn-inr {
display: inline-block;
color: white;
font-weight: 100;
font-size: 2em;
line-height: 1;
text-transform: uppercase;
background: #ed7669;
padding: 1em 2em;
margin: 6px;
-webkit-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
.btn-inr:focus,
.btn-inr:hover {
background: #e74c3c;
padding: 1em 2em;
margin: 0;
}
.txt-a {
display: inline;
}
.txt-b {
display: none;
}
.btn:focus .btn-inr,
.btn:hover .btn-inr {
background: #e74c3c;
padding: 1em 2em;
margin: 0;
}
.btn:focus .txt-a,
.btn:hover .txt-a {
display: none;
}
.btn:focus .txt-b,
.btn:hover .txt-b {
display: inline;
}
<a class="btn" data-js="btn">
<span class="btn-inr">
<span class="txt-a">See this button?</span>
<span class="txt-b">Now ya do.</span>
</span>
</a>