for some reason I can't make my hamburger icon work as expected. I have saw many ways of doing it but I can't figure out what's wrong with mine. this is the result I get:
I expect to get the 'X' of course.
.hamb span {
background-color: black;
width: 50px;
height: 5px;
display: block;
margin-bottom: 10px;
transition: 0.5s;
}
.hamb:hover span:nth-child(1) {
transform: rotate(45deg);
}
.hamb:hover span:nth-child(3) {
transform: rotate(-45deg);
}
.hamb:hover span:nth-child(2) {
transform: translateX(30px);
opacity: 0;
}
.hamb:hover {
cursor: pointer;
}
<div class="nav-item icon">
<div class="hamb"><span></span> <span></span> <span></span></div>
</div>
You should add some translation to the first and last span:
.hamb {
margin:10px;
}
.hamb span {
background-color: black;
width: 50px;
height: 5px;
display: block;
margin-bottom: 10px;
transition: 0.5s;
}
.hamb:hover span:nth-child(1) {
transform: rotate(45deg) translateY(21px);
}
.hamb:hover span:nth-child(3) {
transform: rotate(-45deg) translateY(-21px);
}
.hamb:hover span:nth-child(2) {
transform: translateX(30px) ;
opacity: 0;
}
.hamb:hover {
cursor: pointer;
}
<div class="hamb">
<span></span>
<span></span>
<span></span>
</div>
Building on #TermaniAfif's nice answer, I find it nice if the middle line stays in place and X is center aligned:
.hamb span {
background-color: black;
width: 50px;
height: 5px;
display: block;
margin-bottom: 10px;
transition: 0.5s;
}
.hamb:hover span:nth-child(1) {
transform: rotate(45deg) translateY(10px) translateX(11px);
}
.hamb:hover span:nth-child(3) {
transform: rotate(-45deg) translateY(-10px) translateX(11px);
}
.hamb:hover span:nth-child(2) {
opacity: 0;
}
.hamb:hover {
cursor: pointer;
}
<div class="hamb">
<span></span>
<span></span>
<span></span>
</div>
Related
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 7 months ago.
I have a navigation bar and a background (class="modal") which are set to
display: none;
How do I make it
display: block;
when the input checkbox menu-check is checked using only CSS.
[I have only shown the class modal since both navigation and modal classes act similarly]
.modal {
display: none;
position: absolute;
height: 100%;
top: 0;
left: 0;
right: 0;
background: #00827f;
}
.menu-btn {
position: fixed;
display: flex;
flex-direction: column;
gap: 5px;
bottom: 20px;
right: 20px;
padding: 15px;
border-radius: 20px;
z-index: 10;
background-color: #08ccc9;
cursor: pointer;
}
.menu-btn:hover>span:nth-of-type(1) {
transform-origin: right;
transform: scaleX(0.5);
}
.menu-btn:hover>span:nth-of-type(3) {
transform-origin: left;
transform: scaleX(0.5);
}
.menu-btn input {
display: none;
}
.menu-btn span {
width: 25px;
height: 4px;
border-radius: 999px;
background-color: black;
transition: all 0.3s ease;
}
.menu-btn input:checked~span:nth-of-type(1) {
transform: rotate(45deg) translate(5px, 7px);
transform-origin: center;
transition: all 0.3s ease, transform-origin 0s;
}
.menu-btn input:checked~span:nth-of-type(2) {
transform: translate(30px, 0px);
opacity: 0;
}
.menu-btn input:checked~span:nth-of-type(3) {
transform: rotate(-45deg) translate(5px, -7px);
transform-origin: center;
transition: all 0.3s ease, transform-origin 0s;
}
<label for="menu-check" class="menu-btn">
<input type="checkbox" id="menu-check">
<span></span>
<span></span>
<span></span>
</label>
<div class="modal"></div>
You need to change your HTML so that the checkbox is at the same level in the DOM as the modal. You can only select subsequent or child elements, not previous or ancestral elements.
#menu-check {display:none;}
.modal {
display: none;
position: absolute;
height: 100%;
top: 0;
left: 0;
right: 0;
background: #00827f;
}
.menu-btn {
position: fixed;
display: flex;
flex-direction: column;
gap: 5px;
bottom: 20px;
right: 20px;
padding: 15px;
border-radius: 20px;
z-index: 10;
background-color: #08ccc9;
cursor: pointer;
}
.menu-btn:hover>span:nth-of-type(1) {
transform-origin: right;
transform: scaleX(0.5);
}
.menu-btn:hover>span:nth-of-type(3) {
transform-origin: left;
transform: scaleX(0.5);
}
.menu-btn span {
width: 25px;
height: 4px;
border-radius: 999px;
background-color: black;
transition: all 0.3s ease;
}
/*Check Box CSS Manipulation*/
#menu-check:checked ~ .modal{
display:block;
}
#menu-check:checked ~ .menu-btn span:nth-of-type(1) {
transform: rotate(45deg) translate(5px, 7px);
transform-origin: center;
transition: all 0.3s ease, transform-origin 0s;
}
#menu-check:checked ~ .menu-btn span:nth-of-type(2) {
transform: translate(30px, 0px);
opacity: 0;
}
#menu-check:checked ~ .menu-btn span:nth-of-type(3) {
transform: rotate(-45deg) translate(5px, -7px);
transform-origin: center;
transition: all 0.3s ease, transform-origin 0s;
}
<input type="checkbox" id="menu-check">
<label for="menu-check" class="menu-btn">
<span></span>
<span></span>
<span></span>
</label>
<div class="modal"></div>
How do I remove the
transform-origin: right;
transform: scaleX(0.5);
}
.menu-btn:hover > span:nth-of-type(3){
transform-origin: left;
transform: scaleX(0.5);
}
when the "menu-check" input checkbox is checked since they interfere with transform animations that occur when checked.
Thank you in advance.
.menu-btn {
position: fixed;
display: flex;
flex-direction: column;
gap: 5px;
bottom: 20px;
right: 20px;
padding: 15px;
border-radius: 20px;
z-index: 10;
background-color: #08ccc9;
cursor: pointer;
}
.menu-btn:hover > span:nth-of-type(1) {
transform-origin: right;
transform: scaleX(0.5);
}
.menu-btn:hover > span:nth-of-type(3) {
transform-origin: left;
transform: scaleX(0.5);
}
.menu-btn input {
display: none;
}
.menu-btn span {
width: 25px;
height: 4px;
border-radius: 999px;
background-color: black;
transition: all 0.3s ease;
}
.menu-btn input:checked ~ span:nth-of-type(1) {
transform: rotate(45deg) translate(5px, 7px);
}
.menu-btn input:checked ~ span:nth-of-type(2) {
transform: translate(30px, 0px);
opacity: 0;
}
.menu-btn input:checked ~ span:nth-of-type(3) {
transform: rotate(-45deg) translate(5px, -7px);
}
<label for="menu-check" class="menu-btn">
<input type="checkbox" id="menu-check">
<span></span>
<span></span>
<span></span>
</label>
You can use the input:not(:checked) selector. I'm not sure this is the end result youre going for but here it is applied to your snippet.
.menu-btn {
position: fixed;
display: flex;
flex-direction: column;
gap: 5px;
bottom: 20px;
right: 20px;
padding: 15px;
border-radius: 20px;
z-index: 10;
background-color: #08ccc9;
cursor: pointer;
}
.menu-btn:hover input:not(:checked) ~ span:nth-of-type(1) {
transform-origin: right;
transform: scaleX(0.5);
}
.menu-btn:hover input:not(:checked) ~ span:nth-of-type(3) {
transform-origin: left;
transform: scaleX(0.5);
}
.menu-btn input {
display: none;
}
.menu-btn span {
width: 25px;
height: 4px;
border-radius: 999px;
background-color: black;
transition: all 0.3s ease;
}
.menu-btn input:checked ~ span:nth-of-type(1) {
transform: rotate(45deg) translate(5px, 7px);
}
.menu-btn input:checked ~ span:nth-of-type(2) {
transform: translate(30px, 0px);
opacity: 0;
}
.menu-btn input:checked ~ span:nth-of-type(3) {
transform: rotate(-45deg) translate(5px, -7px);
}
<label for="menu-check" class="menu-btn">
<input type="checkbox" id="menu-check">
<span></span>
<span></span>
<span></span>
</label>
Reset the transform-origin to center on checked and also remove transition from it
.menu-btn {
position: fixed;
display: flex;
flex-direction: column;
gap: 5px;
bottom: 20px;
right: 20px;
padding: 15px;
border-radius: 20px;
z-index: 10;
background-color: #08ccc9;
cursor: pointer;
}
.menu-btn:hover > span:nth-of-type(1) {
transform-origin: right;
transform: scaleX(0.5);
}
.menu-btn:hover > span:nth-of-type(3) {
transform-origin: left;
transform: scaleX(0.5);
}
.menu-btn input {
display: none;
}
.menu-btn span {
width: 25px;
height: 4px;
border-radius: 999px;
background-color: black;
transition: all 0.3s ease;
}
.menu-btn input:checked ~ span:nth-of-type(1) {
transform: rotate(45deg) translate(6px, 7px);
/* added */
transform-origin: center;
transition: all 0.3s ease,transform-origin 0s;
}
.menu-btn input:checked ~ span:nth-of-type(2) {
transform: translate(30px, 0px);
opacity: 0;
}
.menu-btn input:checked ~ span:nth-of-type(3) {
transform: rotate(-45deg) translate(5px, -7px);
/* added */
transform-origin: center;
transition: all 0.3s ease,transform-origin 0s;
}
<label for="menu-check" class="menu-btn">
<input type="checkbox" id="menu-check">
<span></span>
<span></span>
<span></span>
</label>
Im working on a slider and im burn out, you guys know how it is, working on something so much eventually the brain just cant do it, so im going to leave it for today and ask you if you have an answer for the issue.
So heres my slider on html
.header {
grid-area: header;
border: 1px solid black;
background-color: black;
}
.slideshow {
width: 923px;
height: 500px;
overflow: hidden;
display: block;
margin-left: auto;
margin-right: auto;
}
.slideshow-container {
width: 4615px;
font-size: 0;
transition: 1s ease;
height: 500px;
overflow: hidden;
}
.slideshow-container:hover {
animation-play-state: paused;
}
.slide {
animation: slide 24s ease infinite;
}
.img1 {
width: 923px;
height: auto;
object-fit: cover;
}
.img2 {
width: 923px;
height: auto;
object-fit: cover;
}
.img3 {
width: 923px;
height: auto;
object-fit: cover;
}
.img4 {
width: 923px;
height: auto;
object-fit: cover;
}
.img5 {
width: 923px;
height: auto;
object-fit: cover;
}
#keyframes slide {
10% {
margin-left: 0px;
}
20% {
margin-left: -923px;
}
30% {
margin-left: -923px;
}
40% {
margin-left: -1846px;
}
50% {
margin-left: -1846px;
}
60% {
margin-left: -2769px;
}
70% {
margin-left: -2769px;
}
80% {
margin-left: -3692px;
}
90% {
margin-left: -3692px;
}
}
.dot1 {
height: 25px;
width: 25px;
background-color: white;
border-radius: 50%;
display: inline-block;
position: absolute;
margin-top: 470px;
margin-left: 400px;
z-index: 2;
}
.dot1:hover {
border: 2px solid white;
background-color: black;
}
.dot2 {
height: 25px;
width: 25px;
background-color: white;
border-radius: 50%;
display: inline-block;
position: absolute;
margin-top: 470px;
margin-left: 430px;
z-index: 2;
}
.dot3 {
height: 25px;
width: 25px;
background-color: white;
border-radius: 50%;
display: inline-block;
position: absolute;
margin-top: 470px;
margin-left: 460px;
z-index: 2;
}
.dot4 {
height: 25px;
width: 25px;
background-color: white;
border-radius: 50%;
display: inline-block;
position: absolute;
margin-top: 470px;
margin-left: 490px;
z-index: 2;
}
<div class="header">
<div class="slideshow">
<span class="dot1"></span>
<span class="dot2"></span>
<span class="dot3"></span>
<span class="dot4"></span>
<div class="slideshow-container slide">
<img class="img1" src="https://i.imgur.com/xGMtCkJ.jpg">
<img class="img2" src="https://i.imgur.com/1F5Gtuz.jpg">
<img class="img3" src="https://i.imgur.com/GgikuGI.jpg">
<img class="img4" src="https://i.imgur.com/LlTDfcH.jpg">
<img class="img5" src="https://i.imgur.com/hNLNCgQ.png">
</div>
</div>
</div>
So here is what the slider and keyframes look like
What im looking for is a part of a code that i can include to
.dot1:hover {
border: 2px solid white;
background-color: black;
}
So what i want is that when someone hover's over the first dot the slider goes to the first keyframe or image, and so on with the other dots, if anyone knows a way to make that happen without javascripts and if i can reverse the keyframe animation that would be perfect.
thanks :)
It's possible using CSS:
Here is the snippet for slider using pure css:
.csslider {
display: inline-block;
position: relative;
max-width: 480px;
width: 100%;
margin-top: 10px;
}
.csslider > .cs_anchor {
display: none;
}
.csslider > ul {
position: relative;
z-index: 1;
font-size: 0;
line-height: 0;
margin: 0 auto;
padding: 0;
overflow: hidden;
white-space: nowrap;
}
.csslider > ul > li.img img {
width: 100%;
}
.csslider > ul > li.img {
font-size: 0pt;
-khtml-user-select: none;
-moz-user-select: none;
user-select: none;
}
.csslider > ul > li {
position: relative;
display: inline-block;
width: 100%;
height: 100%;
overflow: hidden;
font-size: 15px;
font-size: initial;
line-height: normal;
white-space: normal;
vertical-align: top;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.csslider .cs_lnk{
position: absolute;
top: -9999px;
left: -9999px;
font-size: 0pt;
opacity: 0;
filter: alpha(opacity=0);
}
.csslider > .cs_bullets {
position: absolute;
left: 0;
width: 100%;
z-index: 6;
font-size: 0;
line-height: 8pt;
text-align: center;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.csslider > .cs_bullets > div {
margin-left: -50%;
width: 100%;
}
.csslider > .cs_bullets > label {
position: relative;
display: inline-block;
cursor: pointer;
}
.csslider > .cs_description {
z-index: 3;
}
.csslider > ul > li {
position: absolute;
left: 0;
top: 0;
display: inline-block;
opacity: 0;
z-index: 1;
-webkit-transition: opacity 2000ms ease, -webkit-transform 24000ms linear;
-moz-transition: opacity 2000ms ease, -moz-transform 24000ms linear;
-ms-transition: opacity 2000ms ease, -ms-transform 24000ms linear;
-o-transition: opacity 2000ms ease, -o-transform 24000ms linear;
transition: opacity 2000ms ease, transform 24000ms linear;
}
.csslider > ul > li.num0 {
opacity: 0;
-webkit-transform: scale(1.3) translate(-11.53846%, 11.53846%);
-moz-transform: scale(1.3) translate(-11.53846%, 11.53846%);
-ms-transform: scale(1.3) translate(-11.53846%, 11.53846%);
-o-transform: scale(1.3) translate(-11.53846%, 11.53846%);
transform: scale(1.3) translate(-11.53846%, 11.53846%);
}
.csslider > ul > li.num1 {
opacity: 0;
-webkit-transform: scale(1.3) translate(11.53846%, 11.53846%);
-moz-transform: scale(1.3) translate(11.53846%, 11.53846%);
-ms-transform: scale(1.3) translate(11.53846%, 11.53846%);
-o-transform: scale(1.3) translate(11.53846%, 11.53846%);
transform: scale(1.3) translate(11.53846%, 11.53846%);
}
.csslider > ul > li.num2 {
opacity: 0;
-webkit-transform: scale(1.3) translate(-11.53846%, -11.53846%);
-moz-transform: scale(1.3) translate(-11.53846%, -11.53846%);
-ms-transform: scale(1.3) translate(-11.53846%, -11.53846%);
-o-transform: scale(1.3) translate(-11.53846%, -11.53846%);
transform: scale(1.3) translate(-11.53846%, -11.53846%);
}
.csslider > ul > li.num0 {
opacity: 1;
z-index: 2;
}
.csslider > .slide:hover ~ ul > li.num0 {
opacity: 0;
z-index: 1;
}
.csslider > #cs_slide1_0:hover ~ ul > li.num0,.csslider > #cs_slide1_1:hover ~ ul > li.num1,.csslider > #cs_slide1_2:hover ~ ul > li.num2 {
opacity: 1;
-webkit-transform: scale(1) translate(0, 0);
-moz-transform: scale(1) translate(0, 0);
-ms-transform: scale(1) translate(0, 0);
-o-transform: scale(1) translate(0, 0);
transform: scale(1) translate(0, 0);
z-index: 2;
}
.csslider > .cs_bullets {
bottom: 5px;
margin-bottom: 5px;
}
.csslider > .cs_bullets > label {
margin: 0 6px;
padding: 9px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: #000;
background-color: rgba(0,0,0,0.6);
}
.csslider > .cs_bullets > label.num0 {
background-color: #E34B64;
}
.csslider > .slide:hover ~ .cs_bullets > label {
/* Fallback for web browsers that doesn't support RGBa */
background: #000;
background-color: rgba(0,0,0,0.6);
}
.csslider > #cs_slide1_0:hover ~ .cs_bullets > label.num0,
.csslider > #cs_slide1_1:hover ~ .cs_bullets > label.num1,
.csslider > #cs_slide1_2:hover ~ .cs_bullets > label.num2 {
background-color: #E34B64;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Poor+Story" rel="stylesheet">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>
</title>
</head>
<body>
<div class='csslider autoplay '>
<input name="cs_anchor1" id='cs_slide1_0' type="radio" class='cs_anchor slide'>
<input name="cs_anchor1" id='cs_slide1_1' type="radio" class='cs_anchor slide'>
<input name="cs_anchor1" id='cs_slide1_2' type="radio" class='cs_anchor slide'>
<input name="cs_anchor1" id='cs_play1' type="radio" class='cs_anchor' hover>
<input name="cs_anchor1" id='cs_pause1' type="radio" class='cs_anchor'>
<ul>
<div style="width: 100%; visibility: hidden; font-size: 0px; line-height: 0;">
<img src="http://cssslider.com/sliders/pen/images/buns.jpg" style="width: 100%;">
</div>
<li class='num0 img'>
<img src='http://cssslider.com/sliders/pen/images/buns.jpg' alt='Buns' title='Buns' />
</li>
<li class='num1 img'>
<img src='http://cssslider.com/sliders/pen/images/buns.jpg' alt='Croissant' title='Croissant' />
</li>
<li class='num2 img'>
<img src='http://cssslider.com/sliders/pen/images/buns.jpg' alt='Lemon pie' title='Lemon pie' />
</li>
</ul>
<div class='cs_bullets'>
<label class='num0' for='cs_slide1_0'>
<span class='cs_point'></span>
</label>
<label class='num1' for='cs_slide1_1'>
<span class='cs_point'></span>
</label>
<label class='num2' for='cs_slide1_2'>
<span class='cs_point'></span>
</label>
</div>
</div>
</body>
</html>
What I have: https://jsfiddle.net/f6z1km3k/1/
What I need after :hover (with values that make sense! - not just from the eye)
HTML:
.header-hamburger:hover span:nth-child(1) {
transform: rotate(45deg)
}
.header-hamburger:hover span:nth-child(2) {
transform: scaleX(0);
opacity: 0;
}
.header-hamburger:hover span:nth-child(3) {
transform: rotate(-45deg)
}
I have changed slightly your style.
I move the spans 6px, since now every span is 3px high and the empty space is also 3px
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
margin: 0;
}
.header-hamburger {
height: 15px;
width: 20px;
background: #ff0000;
position: relative;
top: 120px;
left: 120px;
transform: scale(10, 10);
}
.header-hamburger span {
display: block;
position: absolute;
height: 3px;
width: 100%;
background: #000;
transition: 250ms;
transition-property: transform, opacity;
}
.header-hamburger span:nth-child(1) {
top: 0px;
transform-origin: center center;
}
.header-hamburger span:nth-child(2) {
top: 6px;
transform-origin: left center;
}
.header-hamburger span:nth-child(3) {
top: 12px;
transform-origin: center center;
}
.header-hamburger:hover span:nth-child(1) {
transform: translateY(6px) rotate(45deg);
}
.header-hamburger:hover span:nth-child(2) {
transform: scaleX(0);
opacity: 0;
}
.header-hamburger:hover span:nth-child(3) {
transform: translateY(-6px) rotate(-45deg)
}
<div class="header-hamburger">
<span></span>
<span></span>
<span></span>
</div>
Modified like this
.header-hamburger span:nth-child(1) {
top: 0px;
transform-origin: left center;
}
.header-hamburger:hover span:nth-child(1) {
transform: rotate(36deg);
right: -2px;
}
.header-hamburger:hover span:nth-child(3) {
transform: rotate(-36deg);
right: -2px;
}
.header-hamburger span:nth-child(3) {
top: 12px;
transform-origin: left center;
}
I'm not that much experienced in HTML and I wanted to use a designed radio Button.
So, I used these codes from a website and modified it a little bit.
The problem now is whenever I write a sentence in the label it is not appearing in the same line.
Do you have any idea why is that happening ?
Here are the codes
html {
font-family: "Segoe UI";
}
*, *::after, *::before {
box-sizing: border-box;
}
html, body {
height: 100%;
min-height: 100%;
}
body {
margin: 0;
font-family: 'Raleway', Arial, sans-serif;
}
.toggle-button {
position: relative;
display: inline-block;
color: black;
margin: 0 20px;
}
/*tested*/
.toggle-button label {
display: inline-block;
text-transform: uppercase;
cursor: pointer;
text-align: left;
}
/*tested*/
.toggle-button input {
display: none;
}
.toggle-button__icon {
cursor: pointer;
pointer-events: none;
}
/*to let radio button invites clicking*/
.toggle-button__icon:before, .toggle-button__icon:after {
content: "";
position: absolute;
transition: 0.200s ease-out;
}
/*to make radio button clickable*/
.toggle-button--maa label {
width: 110px; /*space between the options*/
height: 20px;
line-height: 20px; /*line spacing*/
transition: all 0.2s;
}
.toggle-button--maa label:before, .toggle-button--maa label:after {
position: absolute;
top: 0;
left: 30px;
width: 110px;
transition: all 0.2s .1s ease-out;
}
.toggle-button--maa label:before {
content: attr(data-text);
}
.toggle-button--maa input:checked ~ .toggle-button__icon:before {
animation: wave .7s ease-out;
}
.toggle-button--maa input:checked ~ .toggle-button__icon:after {
transform: scale(1);
animation: zoomIn .2s;
}
.toggle-button--maa .toggle-button__icon {
position: absolute;
left: 0;
top: 0;
height: 20px;
width: 20px;
border-radius: 50%;
background: #fff;
box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.15);
}
.toggle-button--maa .toggle-button__icon:before, .toggle-button--maa .toggle-button__icon:after {
border-radius: 50%;
}
.toggle-button--maa .toggle-button__icon:before {
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.8);
}
.toggle-button--maa .toggle-button__icon:after {
top: 4px;
left: 4px;
width: 60%;
height: 60%;
background: #61B136;
animation: zoomOut .2s ease-out;
transform: scale(0);
transition: none;
}
.toggle-button--maa:hover input:not(:checked) ~ .toggle-button__icon {
animation: hover .2s;
}
.toggle-button--maa:hover input:not(:checked) ~ label:before {
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
#keyframes zoomOut {
0% {
transform: scale(1);
}
30% {
transform: scale(1.2);
}
100% {
transform: scale(0);
}
}
#keyframes zoomIn {
0% {
transform: scale(0);
}
90% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
#keyframes hover {
0% {
transform: scale(1);
}
30% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
#keyframes wave {
0% {
opacity: 1;
transform: scale(1);
}
40% {
opacity: 0.2;
}
100% {
opacity: 0;
transform: scale(1.5);
}
}
#keyframes zoomFadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes zoomFadeIn {
0% {
opacity: 0;
transform: scale(3);
}
90% {
opacity: 1;
transform: scale(1);
}
100% {
transform: scale(1);
}
}
#keyframes hover {
0% {
transform: scale(1);
}
30% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
<div id="ButtonsDiv" class="auto-style4" >
<div class="toggle-button toggle-button--maa">
<input id="toggleButton7" name="radio3" type="radio"/>
<label for="toggleButton7" data-text="Bachelor accounting student" ></label>
<div class="toggle-button__icon"></div>
</div>
<div class="toggle-button toggle-button--maa">
<input id="toggleButton8" name="radio3" type="radio"/>
<label for="toggleButton8" data-text="Bachelor finance student" class="auto-style5"></label>
<div class="toggle-button__icon"></div>
</div>
</div>
The problem is that you set the label and the :before fixed width. Also, you set position:absolute to the :before element.
html {
font-family: "Segoe UI";
}
*, *::after, *::before {
box-sizing: border-box;
}
html, body {
height: 100%;
min-height: 100%;
}
body {
margin: 0;
font-family: 'Raleway', Arial, sans-serif;
}
.toggle-button {
position: relative;
display: inline-block;
color: black;
margin: 0 20px;
}
/*tested*/
.toggle-button label {
display: inline-block;
text-transform: uppercase;
cursor: pointer;
text-align: left;
}
/*tested*/
.toggle-button input {
display: none;
}
.toggle-button__icon {
cursor: pointer;
pointer-events: none;
}
/*to let radio button invites clicking*/
.toggle-button__icon:before, .toggle-button__icon:after {
content: "";
position: absolute;
transition: 0.200s ease-out;
}
/*to make radio button clickable*/
.toggle-button--maa label {
height: 20px;
line-height: 20px; /*line spacing*/
transition: all 0.2s;
}
.toggle-button--maa label:before, .toggle-button--maa label:after {
margin-left:25px;
transition: all 0.2s .1s ease-out;
}
.toggle-button--maa label:before {
content: attr(data-text);
}
.toggle-button--maa input:checked ~ .toggle-button__icon:before,
.toggle-button--maa:hover input ~ .toggle-button__icon:before{
animation: wave .7s ease-out;
}
.toggle-button--maa input:checked ~ .toggle-button__icon:after,
.toggle-button--maa:hover input ~ .toggle-button__icon:after {
transform: scale(1);
animation: zoomIn .2s;
}
.toggle-button--maa .toggle-button__icon {
position: absolute;
left: 0;
top: 0;
height: 20px;
width: 20px;
border-radius: 50%;
background: #fff;
box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.15);
}
.toggle-button--maa .toggle-button__icon:before, .toggle-button--maa .toggle-button__icon:after {
border-radius: 50%;
}
.toggle-button--maa .toggle-button__icon:before {
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.8);
}
.toggle-button--maa .toggle-button__icon:after {
top: 4px;
left: 4px;
width: 60%;
height: 60%;
background: #61B136;
animation: zoomOut .2s ease-out;
transform: scale(0);
transition: none;
}
/*.toggle-button--maa:hover input:not(:checked) ~ .toggle-button__icon:after {
background:#CACACA;
transform: scale(1);
animation: zoomIn .2s;
}*/
/*.toggle-button--maa:hover input:not(:checked) ~ .toggle-button__icon {
animation: hover .2s;
}*/
.toggle-button--maa:hover input:not(:checked) ~ label:before {
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
#keyframes zoomOut {
0% {
transform: scale(1);
}
30% {
transform: scale(1.2);
}
100% {
transform: scale(0);
}
}
#keyframes zoomIn {
0% {
transform: scale(0);
}
90% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
#keyframes hover {
0% {
transform: scale(1);
}
30% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
#keyframes wave {
0% {
opacity: 1;
transform: scale(1);
}
40% {
opacity: 0.2;
}
100% {
opacity: 0;
transform: scale(1.5);
}
}
#keyframes zoomFadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes zoomFadeIn {
0% {
opacity: 0;
transform: scale(3);
}
90% {
opacity: 1;
transform: scale(1);
}
100% {
transform: scale(1);
}
}
#keyframes hover {
0% {
transform: scale(1);
}
30% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
<div id="ButtonsDiv" class="auto-style4" >
<div class="toggle-button toggle-button--maa">
<input id="toggleButton7" name="radio3" type="radio"/>
<label for="toggleButton7" data-text="Bachelor accounting student" ></label>
<div class="toggle-button__icon"></div>
</div>
<div class="toggle-button toggle-button--maa">
<input id="toggleButton8" name="radio3" type="radio"/>
<label for="toggleButton8" data-text="Bachelor finance student" class="auto-style5"></label>
<div class="toggle-button__icon"></div>
</div>
</div>