I wish to change the color and the background of the button label when I check the button, but it is not working. This is a collapsible button.
.accordion>input[name="collapse"] {
display: none;
/*position: absolute;
left: -100vw;*/
}
.accordion label,
.accordion .content {
margin-left: 0;
}
.accordion label {
display: block;
border-bottom: solid 1px #ffffff55;
width: 76%;
margin-left: 12%;
text-indent: 10px;
font-size: 15px;
font-weight: 400;
font-family: Open Sans;
margin-top: 7px;
padding-top: 13px;
padding-bottom: 7px;
}
.accordion .content {
overflow: hidden;
height: 0;
transition: 0.5s;
}
.accordion>input[name="collapse"]:checked~.content {
height: 0px;
transition: height 0.5s;
}
/* For Desktop */
#media only screen and (min-width: 620px) {
.accordion .handle {
margin: 0;
font-size: 16px;
}
.accordion label {
color: #fff;
cursor: pointer;
font-weight: normal;
user-select: none;
}
.accordion label:hover,
.accordion label:focus {
background: rgba(255, 255, 255, 0.2);
border: rgba(255, 255, 255, 0.2);
border-radius: 5px;
}
.accordion .handle label:after {
font-family: FontAwesome;
content: "\f107";
display: inline-block;
margin-left: 10px;
font-size: 1em;
line-height: 1.556em;
vertical-align: middle;
transition: 0.4s;
}
.accordion>input[name="collapse"]:checked~.content {
height: 70px;
margin-left: 12%;
border-top: 0;
transition: 0.3s;
}
.accordion {
margin-bottom: 0;
}
.accordion>input[name="collapse"]:checked~.handle label:after {
transform: rotate(180deg);
transform-origin: center;
transition: 0.4s;
}
.accordion>input[name="collapse"]:checked~.accordion label {
color: #000;
background: #ffffff;
}
}
<div class="accordion">
<input type="checkbox" name="collapse" id="handle4">
<h2 class="handle ">
<label for="handle4" style="">Change Language</label>
</h2>
<div class="content">
<p>Some contents</p>
</div>
</div>
The very last CSS instruction is the one I'm trying to use to change the color and background of the label "Change language", but it does not work.
Please help!
Your sibling element shall be .handle label instead of .accordion label
you would need to change the instruction to this
.accordion>input[name="collapse"]:checked ~ .handle label {
color: #000;
background: #ffffff;
}
the one you have will not work since there is no direct sibling that is .accordion
Related
I like to create a menu only with HTML and CSS to use in my web application that:
some items could have sub menus
it is responsive
use a hamburger for mobile
could be switch between horizontal and vertical on desktops
For example, I have this horizontal menu at the top of the page
enter image description here
from this code (you can see the result in the full screen)
:root {
--main-bg-color: #000;
--main-txt-color: #FFF;
--hover-color: #fada04;
--mobile-bg-color: #f6f6f6;
--mobile-bg-color-level2: #fff;
--mobile-txt-color: #666;
--g1: #FDE100;
--g2: #D6A71D;
}
.menu-toggle {
display: block;
}
.headermenu {
padding: 8px 0;
vertical-align: sub;
letter-spacing: 1px;
margin: 0 0 0px 0;
display: block;
height: 26px;
width: auto;
clear: both;
z-index: 999;
}
.headermenu ul {
padding: 0;
margin: 0;
width: 100%;
float: left;
position: relative;
background-color: var(--main-bg-color);
list-style: none;
}
.top-menu li.active {
background-image: linear-gradient(var(--g1), var(--g2));
}
.top-menu li.active>a {
color: var(--main-txt-color);
}
.top-menu li {
position: relative;
background: var(--main-bg-color);
white-space: nowrap;
*white-space: normal;
-webkit-transition: background .2s;
transition: background .2s;
}
.top-menu ul {
position: absolute;
display: none;
top: 100%;
left: 0;
z-index: 999;
box-shadow: 2px 2px 6px rgba(0, 0, 0, .2);
min-width: fit-content;
}
.top-menu>li {
float: left;
}
.top-menu li:hover>ul {
display: block;
}
.top-menu a {
display: block;
position: relative;
padding: .75em 1em;
text-decoration: none;
color: var(--main-txt-color);
}
.top-menu a:hover {
color: var(--hover-color);
}
.top-menu ul ul {
top: 0;
left: 100%;
}
.top-menu .sf-with-ul {
padding-right: 2.5em;
*padding-right: 1em;
}
.top-menu .sf-with-ul:after {
content: '';
position: absolute;
top: 50%;
right: 1em;
margin-top: -3px;
height: 0;
width: 0;
border: 5px solid transparent;
border-top-color: rgba(255, 255, 255, .5);
}
.top-menu>li>.sf-with-ul:focus:after,
.top-menu>li:hover>.sf-with-ul:after {
border-top-color: white;
}
.top-menu ul .sf-with-ul:after {
margin-top: -5px;
margin-right: -3px;
border-color: transparent;
border-left-color: rgba(255, 255, 255, .5);
}
.top-menu ul li>.sf-with-ul:focus:after,
.top-menu ul li:hover>.sf-with-ul:after {
border-left-color: white;
}
.mobile-menu,
.hamburger {
display: none;
}
ul.top-menu.mobile {
display: none;
}
/* --- mobile (20201207 SDE)*/
#media all and (max-width: 1000px) {
element.style {
display: block;
}
.top-menu li.active {
background-image: initial;
}
.top-menu li.active>a {
color: initial;
}
ul {
list-style: none;
}
.headermenu ul {
padding: initial;
margin: initial;
width: initial;
float: initial;
position: initial;
background-color: initial;
list-style: none;
}
.top-menu li {
position: initial;
background: initial;
white-space: initial;
*white-space: initial;
-webkit-transition: initial;
transition: initial;
}
.top-menu ul {
position: initial;
display: initial;
top: initial;
left: initial;
z-index: initial;
box-shadow: initial;
min-width: initial;
}
/* .top-menu > li {
float: initial;
}*/
.top-menu>li {
float: initial;
/*margin: 1px 0;*/
border: 1px;
position: relative;
background-color: var(--mobile-bg-color);
/*background-color: #f6f6f6;*/
}
.top-menu li:hover>ul {
display: none;
}
.top-menu a:hover {
color: initial;
}
.menu-toggle {
display: block;
color: #fff;
padding: 15px;
font-size: 35px;
cursor: pointer;
font-weight: bold;
text-transform: uppercase;
background: #151515;
}
.sublist-toggle {
top: 0;
right: 0;
color: #fff;
width: 55px;
height: 55px;
padding: 15px;
cursor: pointer;
font-size: 15px;
font-weight: bold;
position: absolute;
text-transform: uppercase;
border-left: 1px solid #fff;
background: url(images/toggle-black.png) center no-repeat;
}
.top-menu {
display: none;
}
.top-menu>li {
float: initial;
position: relative;
background-color: var(--mobile-bg-color);
}
.top-menu .sublist {
display: none;
padding: 5px 0;
background-color: #fff;
}
.top-menu a {
color: #666;
padding: 18px;
display: block;
font-size: 25px;
text-decoration: none;
}
.top-menu .sublist li {
position: relative;
margin: 1px 0 1px 20px;
}
.sf-with-ul {
cursor: pointer;
}
/* BEOF Hamburger */
.hamburger {
padding: 15px 15px 0px 0px;
display: inline-block;
cursor: pointer;
transition-property: opacity, filter;
transition-duration: 0.15s;
transition-timing-function: linear;
font: inherit;
color: inherit;
text-transform: none;
background-color: transparent;
border: 0;
margin: 0;
overflow: visible;
float: right;
}
.hamburger:hover {
opacity: 0.7;
}
.hamburger.is-active:hover {
opacity: 0.7;
}
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
background-color: #000;
}
.hamburger-box {
width: 40px;
height: 24px;
display: inline-block;
position: relative;
vertical-align: top;
}
.hamburger-inner {
display: block;
top: 50%;
margin-top: -2px;
}
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
width: 40px;
height: 4px;
background-color: white;
border-radius: 4px;
position: absolute;
transition-property: transform;
transition-duration: 0.15s;
transition-timing-function: ease;
}
.hamburger-inner::before,
.hamburger-inner::after {
content: "";
display: block;
}
.hamburger-inner::before {
top: -10px;
}
.hamburger-inner::after {
bottom: -10px;
}
/* EOF Hamburger */
}
<ul class="top-menu">
<li class="active">Home</li>
<li><a class="sf-with-ul" href="/jeans">Jeans</a>
<div class="sublist-toggle"></div>
<ul class="sublist">
<li style="">Wide leg jeans</li>
<li style="">Straight jeans</li>
<li style="">Loose jeans</li>
</ul>
</li>
<li><a class="sf-with-ul" href="/shorts">Shorts</a>
<div class="sublist-toggle"></div>
<ul class="sublist">
<li style=""><a class="sf-with-ul" href="/sweet_jersey">Sweet jersey shorts</a>
<div class="sublist-toggle"></div>
<ul class="sublist">
<li style="">Jersey1</li>
<li style="">Jersey2</li>
</ul>
</li>
<li style="">Denim shorts</li>
</ul>
</li>
<li>Skirts</li>
<li>Blazers</li>
</ul>
I can't find a way to transform the menu above in vertical menu like this one
enter image description here
I have done a bit of the basics to point you in the right direction. You can build on this to make it responsive, hamburger, etc...
The menu should have this format. The submenu is nested in the list element of the parent. The span in the parent is the button we click to open the submenu. Each submenu parent has a corresponding span with a unique incremental id.
<div class="sidemenu">
<ul class="top">
<li>Home</li>
<li class="toggle">Jeans<span id="span1" onclick="openSub(1)">+</span>
<ul id="sub1">
<li>Wide</li>
<li>Straight</li>
<li>Loose</li>
</ul>
</li>
<li class="toggle">Shorts<span id="span2" onclick="openSub(2)">+</span>
<ul id="sub2">
<li>Sweet<span id="span3" onclick="openSub(3)">+</span>
<ul id="sub3">
<li>Jersey1</li>
<li>Jersey2</li>
</ul>
</li>
<li>Denim</li>
</ul>
</li>
<li>Skirts</li>
<li>Blazers</li>
</ul>
</div>
We will have to use JS to open and close the submenus when the correct span is clicked.
The first 6 lines hide the submenus by default when the page is loaded.
The openSub() function takes a number representing the submenu we want to open (1 for jeans, 2 for shorts, etc...)
The function then identifies the submenu we want to open, and toggles it to display. The next line changes the text of the span from "+" to "-" to represent an open submenu. If the span is clicked again, the submenu is closed and the text goes back to its default.
var toggle = document.getElementById("sub1");
toggle.style.display = "none";
var toggle = document.getElementById("sub2");
toggle.style.display = "none";
var toggle = document.getElementById("sub3");
toggle.style.display = "none";
function openSub(caller) {
var toggle = document.getElementById("sub"+caller);
toggle.style.display = toggle.style.display === 'none' ? '' : 'none';
document.getElementById("span"+caller).textContent = document.getElementById("span"+caller).textContent === "+" ? '-' : '+';
}
CSS used mostly for styling:
.sidemenu {
width: 250px;
height: 100vh;
background: lightblue;
}
ul.top {
list-style-type: none;
}
ul.top li {
width: 100%;
height: auto;
min-height: 50px;
margin: 10px 0;
padding: 20px 0 0 10px;
}
ul.top li span {
float: right;
}
#sub1, #sub2, #sub3 {
margin-top: 25px;
padding-left: 15px;
}
li {
width: 100%;
height: 50px;
}
span {
padding-right: 25px;
}
Ok so I have a problem with my navbar on mobile. It is hidden and it displays only when I press the bar (toggler). The problem is: if I press on the screen when the navbar isn't displayed it still goes to the links, even if I can't see the li's.
I want to keep the same navbar but I don't want to acces the links when it is closed.
If its possible please tell me how to solve it and the problems of my navbar
This is my code:
.banner {
margin: 0px;
position: relative;
width: 100%;
height: 100vh;
background-size: cover;
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.6)), url(../img/pozabackground-home2.jpg);
background-position: center;
box-shadow: 1px 2px 4px 0px #00000075 !important;
background-attachment: fixed;
}
.navigatie {
background-color: transparent;
width: 100%;
position: fixed;
z-index: 99;
margin: 0px;
padding: 0px;
}
.logo {
float: left;
padding: 8px;
margin-left: 40px;
margin-top: 8px;
}
.navbar-brand {
color: white !important;
}
.navbar-brand img {
width: auto;
height: 100px;
margin: -32px 0px -25px 0px;
}
nav ul {
float: right;
list-style-type: none;
padding-top: 5px;
margin-right: 20px;
}
nav ul li {
float: left;
}
nav ul li:not(:first-child) {
margin-left: 48px;
}
nav ul li:last-child {
margin-right: 24px;
}
nav ul li a {
display: inline-block;
outline: none;
color: #fff;
text-transform: uppercase;
text-decoration: none;
font-size: 13px;
letter-spacing: 1.1px;
font-weight: 600;
}
nav ul li a:hover {
color: #fff;
text-decoration: underline;
}
/* FUNDAL JS */
.fundal {
background: #104f47 !important;
box-shadow: 1px 2px 4px 0px #00000075 !important;
}
.fundal .nav-btn {
background-color: #104f47;
border-radius: 50%;
box-shadow: 1px 2px 4px 0px #00000075;
}
.fundal .nav-btn i {
background: #fff;
border-radius: 2px;
}
#nav:checked+.nav-btn {
transform: rotate(45deg);
background-color: #104f47;
}
#nav:checked+.nav-btn i {
background: #fff;
transition: transform 0.2s ease;
}
#nav:checked+.nav-btn i:nth-child(1) {
transform: translateY(6px) rotate(180deg);
}
#nav:checked+.nav-btn i:nth-child(2) {
opacity: 0;
}
#nav:checked+.nav-btn i:nth-child(3) {
transform: translateY(-6px) rotate(90deg);
}
#nav:checked~.nav-wrapper {
z-index: 9990;
opacity: 1;
}
#nav:checked~.nav-wrapper ul li a {
opacity: 1;
transform: translateX(0);
}
.hidden {
display: none;
}
/* MEDIA SCREEN PTR TLF */
#media only screen and (max-width: 991px) {
.navigatie {
background-color: transparent;
width: 100%;
position: absolute;
;
z-index: 99;
margin: 0px;
padding: 0px;
}
.navbar-brand img {
height: 100px;
margin: -20px 0px 0px 0px;
}
.nav-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: #fff;
opacity: 0;
transition: all 0.2s ease;
}
.nav-wrapper ul {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
.nav-wrapper ul li {
display: block;
float: none;
width: 100%;
text-align: right;
padding-top: 10px;
margin-bottom: 10px;
}
.nav-wrapper ul li:nth-child(1) a {
transition-delay: 0.2s;
}
.nav-wrapper ul li:nth-child(2) a {
transition-delay: 0.3s;
}
.nav-wrapper ul li:nth-child(3) a {
transition-delay: 0.4s;
}
.nav-wrapper ul li:nth-child(4) a {
transition-delay: 0.5s;
}
.nav-wrapper ul li:not(:first-child) {
margin-left: 0;
}
.nav-wrapper ul li a {
padding: 10px 24px;
opacity: 0;
color: #000;
font-size: 14px;
font-weight: 600;
letter-spacing: 1.2px;
transform: translateX(-20px);
transition: all 0.2s ease;
}
.nav-btn {
position: fixed;
right: 30px;
top: 28px;
display: block;
width: 48px;
height: 46px;
cursor: pointer;
z-index: 9999;
border-radius: 50%;
}
.nav-btn i {
display: block;
width: 20px;
height: 2px;
background: #fff;
border-radius: 2px;
margin-left: 14px;
}
.nav-btn i:nth-child(1) {
margin-top: 16px;
}
.nav-btn i:nth-child(2) {
margin-top: 4px;
opacity: 1;
}
.nav-btn i:nth-child(3) {
margin-top: 4px;
}
}
/* SCRIS DE LA BANNER */
.title {
position: absolute;
top: 47%;
left: 35%;
text-align: left;
transform: translate(-50%, -50%);
}
.title h1 {
color: #fff;
font-family: poppins;
font-size: 50px;
color: #f5f6f8;
padding-bottom: 20px;
}
.button button {
display: inline-block;
font-size: 12px;
text-transform: uppercase;
text-align: center;
padding: 13px 20px;
border: none;
color: white;
font-family: montserrat;
text-decoration: none;
transition: 0.6s ease;
background-color: #104f47;
box-shadow: 1px 2px 4px 0px #00000075;
outline: none;
}
.button button:hover {
background-color: #104f47;
color: white;
}
<div class="navigatie">
<nav>
<input type="checkbox" id="nav" class="hidden">
<label for="nav" class="nav-btn">
<i></i>
<i></i>
<i></i>
</label>
<div class="logo">
<a class="navbar-brand" href="index.php"><img src="./img/logoinainte.png"></a>
</div>
<div class="nav-wrapper">
<ul>
<li>Acasa</li>
<li>Despre</li>
<li>Servicii</li>
<li>Tarife</li>
<li>Contact</li>
</ul>
</div>
</nav>
</div>
<section class="banner">
<div class="container">
<div class="title">
<h1>Aspect curat <br>și îmbunătățit al <br>locuinței tale</h1>
<div class="button">
<button type="button">Sună acum!</button>
</div>
</div>
</div>
</section>
Could you tell me what is the problem?
You are using opacity. With opacity the element becomes invisible but it is still there. You have to set its display to none. And when the button is clicked you have to set its display to block.
.nav-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: #fff;
display:none;
transition: all 0.2s ease;
}
#nav:checked ~ .nav-wrapper {
z-index: 9990;
display:block
}
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 have the following code (below) of my form section and in it i want this (below image) underline animation to be done in the text input field . Whenever the user focus on the field the animation to be done.
the animation is to be smooth ease.
But something is missing i can't find in it. What is wrong and How to fix it?
Anyone Please help
html {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizelegibility;
}
html, body {
height: 100%;
}
#contact {
font-family: "Montserrat", sans-serif;
font-size: 14px;
font-weight: 300;
letter-spacing: 3px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
margin: 10% 0;
}
#contact main, body footer {
width: 100%;
}
#contact main {
height: 100%;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.form .text-input, .form .textarea, .form .label, .form .button {
padding: 1em 1.5em;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
line-height: normal;
border: 1px solid transparent;
border-radius: 0;
}
.form .text-input, .form .textarea {
font: inherit;
line-height: normal;
width: 100%;
box-sizing: border-box;
display: block;
padding-left: 0;
border-bottom-color: #00d2ff;
background: transparent;
outline: none;
color: black;
}
.form .text-input:placeholder, .form .textarea:placeholder {
color: rgba(0, 0, 0, 0.7);
}
.form .text-input:-webkit-autofill, .form .textarea:-webkit-autofill {
box-shadow: 0 0 0px 1000px white inset;
border-top-color: white;
border-left-color: white;
border-right-color: white;
}
.form .error.text-input, .form .error.textarea, .error .form .text-input, .form .error .text-input, .error .form .textarea, .form .error .textarea {
border-color: transparent transparent red transparent;
}
.form:not(.has-floated-label) .text-input:active, .form:not(.has-floated-label) .textarea:active, .form:not(.has-floated-label) .text-input:focus, .form:not(.has-floated-label) .textarea:focus {
border-color: transparent transparent black transparent;
}
.form .label {
position: absolute;
z-index: 10;
pointer-events: none;
padding-left: 0;
}
.form .label {
top: 0;
left: 0;
color: rgba(0, 0, 0, 0.3);
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
.active .form .label, .form .active .label {
font-size: 0.80em;
line-height: 1;
font-weight: 600;
text-transform: uppercase;
padding: 0;
color: rgba(0, 0, 0, 0.7);
background: white;
}
.focus .form .label, .form .focus .label {
color: black;
}
.form.has-floated-label .field:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0%;
border-bottom: 3px solid #00d2ff;
-webkit-transition: width 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
transition: width 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.form.has-floated-label .field.focus:after {
width: 100%;
}
.form .button {
font: inherit;
line-height: normal;
cursor: pointer;
background-color: #00d2ff;
color: white;
text-transform: uppercase;
text-align: center;
letter-spacing: 0.14286em;
transition-duration: 0.4s;
}
.form .button:hover, .form .button:focus, .form .button:active {
box-shadow: 0 10px 15px rgba(0, 0, 0, .1);
}
.form .button:active {
position: relative;
top: 1px;
left: 1px;
}
.form {
/* max-width: 50em; */
width: 100%;
margin: 0 10%;
/* padding: 1em 2em; */
box-sizing: border-box;
overflow: hidden;
}
.form .field {
position: relative;
width: 100%;
margin-bottom: 1.5em;
float: left;
}
#media screen and (min-width: 40em) {
.form .field.half {
width: calc(50% - 2em);
margin-right: 2em;
}
.form .field.half + .half {
margin-left: 2em;
margin-right: 0;
}
}
.form .field:last-child {
float: right;
width: auto;
}
.form .textarea {
max-width: 100%;
}
<section id="contact">
<main>
<form action='' class='form'>
<p class='field required half'>
<label class='label required' for='name'>Name</label>
<input class='text-input' id='name' name='name' required type='text'>
</p>
<p class='field required half'>
<label class='label' for='email'>E-mail</label>
<input class='text-input' id='email' name='email' required type='email'>
</p>
<p class='field'>
<label class='label' for='message'>Message</label>
<textarea class='textarea' cols='50' id='message' name='message' required rows='4'></textarea>
</p>
<p class='field'>
<input class='button' type='submit' value='Send message'>
</p>
</form>
</main>
</section>
This is an example:
.input-name{
position: relative;
display: inline-block;
overflow: hidden;
}
.input-name > input[type=text]{
border: none;
border-bottom: 2px solid red;
outline: none;
}
.underline-animation{
transition: all 0.5s;
display: inline-block;
bottom: 0;
left: -100%;
position: absolute;
width: 100%;
height: 2px;
background-color: #64e4fe;
}
.input-name > input[type=text]:focus + .underline-animation{
left: 0;
}
<div class="input-name">
<input type="text" placeholder="name">
<span class="underline-animation"></span>
</div>
I don't think this is possible with only the underline element since I know of no way to animate it like that, you can use the <hr> element though.
then you can do
hr{
position:relative;
left:0;
width:0%;
height:2px;
background-color:#1784E1;
border:none;
margin-top:0;
margin-left:0;
margin-bottom:20px;
transition:0.5s;
}
input:focus + hr{
width:100%;
}
if you go to sam.apostel.be/TAD, is that what you want?
All right? I'm having problems with an effect on CSS. Everything works perfectly until I put the code inside another div, and has a background that is not transparent. Look at the example below:
body {
background: #2ecc71;
padding:0;
margin:0;
}
#bg{
background: #000;
}
.container-button {
padding: 10em;
margin: 0 auto;
width: 1170px;
text-align: center;
display: block;
overflow: hidden;
}
/* GENERAL BUTTON STYLING */
.btn-more-info{
display:block;
overflow: hidden;
text-align: center;
display: inline-block;
float: left;
}
.btn-more-info a,
.btn-more-info a::after {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
test-ident: -9999px;
text-decoration: none;
}
.btn-more-info a {
background: none;
border: 2px solid #fff;
border-radius: 5px;
color: #fff;
display: block;
font-size: 14px;
font-weight: bold;
padding: 20px 50px;
position: relative;
text-transform: uppercase;
}
.btn-more-info a::before,
.btn-more-info a::after {
background: #fff;
content: '';
position: absolute;
z-index: -1;
}
.btn-more-info a:hover {
color: #2ecc71;
}
/* BUTTON EFFECT */
.btn-effect {
overflow: hidden;
}
.btn-effect::after {
/*background-color: #f00;*/
height: 100%;
left: -35%;
top: 0;
transform: skew(50deg);
transition-duration: 0.6s;
transform-origin: top left;
width: 0;
}
.btn-effect:hover:after {
height: 100%;
width: 135%;
}
.btn-send{
overflow: hidden;
text-align: center;
clear: both;
}
.btn-send a,
.btn-send a::after {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
test-ident: -9999px;
text-decoration: none;
}
.btn-send a {
background: none;
border: 2px solid #353B4C;
border-radius: 5px;
color: #353B4C;
display: inline-block;
font-size: 14px;
font-weight: bold;
padding: 20px 50px;
position: relative;
text-transform: uppercase;
}
.btn-send a::before,
.btn-send a::after {
background: #353B4C;
content: '';
position: absolute;
z-index: -1;
}
.btn-send a:hover {
color: #FFF;
}
<div id="bg">
<div class="container-button">
<div class="btn-more-info">
Continue lendo
</div>
<div class="btn-send">
Enviar mensagem
</div>
</div>
</div>
You see, if you remove the id="bg" effect functions normally.
Can anyone help me?
Thank U!
The problem is on the z-index of the :before and :after.
Try this:
.btn-more-info a::before,
.btn-more-info a::after {
background: #fff;
content: '';
position: absolute;
z-index: 0;
}
Also increase the z-index on the text inside the button.