How to make the animation play when the radio button is checked?

How to make the animation play when the radio button is checked? - html

I tried to make a custom radio button which changes color and plays and animation when click upon. But I was just able to do that with hover, I tried to use the "input:checked" but it pretty much didn't work
When I hover on the radio button an animation takes place, but I want the animation to take place when I click the radio button. Please help me out with this!!
body{
margin: 0;
padding: 0;
}
.choose{
margin: 0;
padding: 0;
position: relative;
top: 0px;
display: block;
background: #262626;
height: 209px;
}
.choose input{
-webkit-appearance: none;
}
.choose #female{
position: absolute;
left: 65%;
}
.choose #male, #female{
position: absolute;
top: 50%;
left: 35%;
transform: translate(-50%,-50%);
background: #ffffff;
width: 70px;
height: 70px;
text-align: center;
border-radius: 50%;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
transition: .5s;
font-size: 24px;
color: #262626;
}
.choose #male:hover{
background: #3c81de;
color: white;
}
.choose #female:hover{
background: #f23895;
color: white;
}
.choose #male .fas{
display: block;
line-height: 70px;
border-radius: 50%;
}
.choose #female .fas{
display: block;
line-height: 70px;
border-radius: 50%;
}
.choose #male .fas:hover{
animation: manimate 7s;
}
#keyframes manimate{
0%{
box-shadow: 0 0 0 0 rgb(90, 168, 217)
}
12%{
box-shadow: 0 0 0 50px rgba(255,109,74,0)
}
80%{
box-shadow: 0 0 0 0px rgba(255,109,74,0)
}
100%{
box-shadow: 0 0 0 50px rgba(255,109,74,0)
}
}
.choose #female .fas:hover{
animation: fanimate 7s;
}
#keyframes fanimate{
0%{
box-shadow: 0 0 0 0 rgba(237, 110, 173, 0.98)
}
12%{
box-shadow: 0 0 0 50px rgba(255,109,74,0)
}
80%{
box-shadow: 0 0 0 0px rgba(255,109,74,0)
}
100%{
box-shadow: 0 0 0 50px rgba(255,109,74,0)
}
}
<!DOCTYPE html>
<html>
<head>
<title>mvrikxix's Arena</title>
<link rel="stylesheet" href="PlaywithButtons.css">
<link rel="icon" href="mvrikxix.png">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet">
</head>
<body>
<div class="choose">
<label>
<input type="radio"><span id="male")><i class="fas fa-mars"></i></span></input>
<input type="radio"><span id="female"><i class="fas fa-venus"></i></span></input>
</label>
</div>
</body>
</html>

It may have been an issue with the selector you were trying. This should work:
.choose input:checked + #male .fas {
...
}
body {
margin: 0;
padding: 0;
}
.choose {
margin: 0;
padding: 0;
position: relative;
top: 0px;
display: block;
background: #262626;
height: 209px;
}
.choose input {
-webkit-appearance: none;
}
.choose #female {
position: absolute;
left: 65%;
}
.choose #male,
#female {
position: absolute;
top: 50%;
left: 35%;
transform: translate(-50%, -50%);
background: #ffffff;
width: 70px;
height: 70px;
text-align: center;
border-radius: 50%;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
transition: .5s;
font-size: 24px;
color: #262626;
}
.choose #male:hover {
background: #3c81de;
color: white;
}
.choose #female:hover {
background: #f23895;
color: white;
}
.choose #male .fas {
display: block;
line-height: 70px;
border-radius: 50%;
}
.choose #female .fas {
display: block;
line-height: 70px;
border-radius: 50%;
}
.choose #male .fas:hover {
animation: manimate 7s;
}
#keyframes manimate {
0% {
box-shadow: 0 0 0 0 rgb(90, 168, 217)
}
12% {
box-shadow: 0 0 0 50px rgba(255, 109, 74, 0)
}
80% {
box-shadow: 0 0 0 0px rgba(255, 109, 74, 0)
}
100% {
box-shadow: 0 0 0 50px rgba(255, 109, 74, 0)
}
}
.choose #female .fas:hover {
animation: fanimate 7s;
}
#keyframes fanimate {
0% {
box-shadow: 0 0 0 0 rgba(237, 110, 173, 0.98)
}
12% {
box-shadow: 0 0 0 50px rgba(255, 109, 74, 0)
}
80% {
box-shadow: 0 0 0 0px rgba(255, 109, 74, 0)
}
100% {
box-shadow: 0 0 0 50px rgba(255, 109, 74, 0)
}
}
.choose input:checked + #male .fas {
animation: manimate 7s;
}
.choose input:checked + #female .fas {
animation: fanimate 7s;
}
<!DOCTYPE html>
<html>
<head>
<title>mvrikxix's Arena</title>
<link rel="stylesheet" href="PlaywithButtons.css">
<link rel="icon" href="mvrikxix.png">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet">
</head>
<body>
<div class="choose">
<label>
<input type="radio"><span id="male"><i class="fas fa-mars"></i></span>
<input type="radio"><span id="female"><i class="fas fa-venus"></i></span>
</label>
</div>
</body>
</html>

I guess your approach was totally fine. This also answers your question (have a look at the code below).
This code will trigger only once after selecting one of the two types. But this will trigger the animation on the radio button itself and not on the icon. If you inspect your code in the browser with some dev tools, you will notice that your radiobuttons have a size of 0x0 and they're placed in the very top left corner. So even if you trigger your animation. It will will be in the wrong place.
Either place the radiobuttons right behind the icons and make them the same size or create a trigger on the icon itself.
body{
margin: 0;
padding: 0;
}
.choose{
margin: 0;
padding: 0;
position: relative;
top: 0px;
display: block;
background: #262626;
height: 209px;
}
.choose input{
-webkit-appearance: none;
}
.choose #female{
position: absolute;
left: 65%;
}
.choose #male, #female{
position: absolute;
top: 50%;
left: 35%;
transform: translate(-50%,-50%);
background: #ffffff;
width: 70px;
height: 70px;
text-align: center;
border-radius: 50%;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
transition: .5s;
font-size: 24px;
color: #262626;
}
.choose #male:hover{
background: #3c81de;
color: white;
}
.choose #female:hover{
background: #f23895;
color: white;
}
.choose #male .fas{
display: block;
line-height: 70px;
border-radius: 50%;
}
.choose #female .fas{
display: block;
line-height: 70px;
border-radius: 50%;
}
.choose #male .fas:hover{
animation: manimate 7s;
}
#keyframes manimate{
0%{
box-shadow: 0 0 0 0 rgb(90, 168, 217)
}
12%{
box-shadow: 0 0 0 50px rgba(255,109,74,0)
}
80%{
box-shadow: 0 0 0 0px rgba(255,109,74,0)
}
100%{
box-shadow: 0 0 0 50px rgba(255,109,74,0)
}
}
.choose #female .fas:hover{
animation: fanimate 7s;
}
input[type="radio"]:checked{
animation: fanimate 7s;
}
#keyframes fanimate{
0%{
box-shadow: 0 0 0 0 rgba(237, 110, 173, 0.98)
}
12%{
box-shadow: 0 0 0 50px rgba(255,109,74,0)
}
80%{
box-shadow: 0 0 0 0px rgba(255,109,74,0)
}
100%{
box-shadow: 0 0 0 50px rgba(255,109,74,0)
}
}
<!DOCTYPE html>
<html>
<head>
<title>mvrikxix's Arena</title>
<link rel="stylesheet" href="PlaywithButtons.css">
<link rel="icon" href="mvrikxix.png">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet">
</head>
<body>
<div class="choose">
<label>
<input type="radio"><span id="male")><i class="fas fa-mars"></i></span></input>
<input type="radio"><span id="female"><i class="fas fa-venus"></i></span></input>
</label>
</div>
</body>
</html>

In order to use :checked, you'll need to stay aware of the HTML structure.
For example, it seems that you want to style the <span> elements directly following <input> elements. The adjacent sibling or general sibling combinator can be useful for that.
I've also wrapped each input in its own label to keep them independent.
body {
margin: 0;
padding: 0;
}
.choose {
background: #262626;
display: flex;
justify-content: space-around;
padding: 5% 0;
}
.choose input {
display: none;
}
#male span,
#female span {
display: block;
background: #ffffff;
width: 70px;
height: 70px;
text-align: center;
border-radius: 50%;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
transition: .5s;
font-size: 24px;
color: #262626;
}
#male input:checked+span {
background: #3c81de;
color: white;
}
#female input:checked+span {
background: #f23895;
color: white;
}
.choose .fas {
display: block;
line-height: 70px;
border-radius: 50%;
}
#male input:checked+span .fas {
animation: manimate 7s;
}
#keyframes manimate {
0% {
box-shadow: 0 0 0 0 rgb(90, 168, 217)
}
12% {
box-shadow: 0 0 0 50px rgba(255, 109, 74, 0)
}
80% {
box-shadow: 0 0 0 0px rgba(255, 109, 74, 0)
}
100% {
box-shadow: 0 0 0 50px rgba(255, 109, 74, 0)
}
}
#female input:checked+span .fas {
animation: fanimate 7s;
}
#keyframes fanimate {
0% {
box-shadow: 0 0 0 0 rgba(237, 110, 173, 0.98)
}
12% {
box-shadow: 0 0 0 50px rgba(255, 109, 74, 0)
}
80% {
box-shadow: 0 0 0 0px rgba(255, 109, 74, 0)
}
100% {
box-shadow: 0 0 0 50px rgba(255, 109, 74, 0)
}
}
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet">
<div class="choose">
<label id="male">
<input name="gender" type="radio">
<span><i class="fas fa-mars"></i></span>
</label>
<label id="female">
<input name="gender" type="radio">
<span><i class="fas fa-venus"></i></span>
</label>
</div>

Related

Can I isolate dropdown menu under the same container?

Problem
I'm creating a dropdown menu based on this codepen for my website and I'm trying to isolate the dropdown menu for just a button, within the same div. The code is working for a single button, but when ther's two or more, they all share the same dropdown... Here's an example.
▲ This is the button with the dropdown, it works
▲ But the second button, within the same DIV, also gets the same dropdown...
I believe it's something related to position:absolute, because it's somewhat better when I remove it (but the dropdown position also go to the div).
What I've tried
I was expecting this dropdown menu to be only for an ID, e.g. translate. But when I add the dropdown, it works for all buttons inside the same container div, which I do not want.
This is the code which I have tried:
/* Page settings */
.page-settings {
#include flex-center;
position: fixed;
flex-direction: row;
z-index: 10;
top: 3vw;
right: 2vw;
.btn {
#include flex-center;
#include ease-in-out;
width: min(10vw, 80px);
aspect-ratio: 1 / 1;
border-radius: 50%;
margin: 0 4%;
background-color: var(--color-grey-4);
border: none;
box-shadow: var(--box-shadow-1);
i {
font-size: var(--size-button);
color: var(--color-grey-1);
pointer-events: none;
}
&:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px var(--color-white);
}
}
}
#translate {
&:focus,
&:active {
.dropdown {
transform: translate(0, 20px);
opacity: 1;
visibility: visible;
}
}
.material-icons {
border-radius: 100%;
animation: ripple 0.6s linear infinite;
}
.dropdown {
position: absolute;
top: 100%;
left: 0;
background: #fff;
width: 100%;
border-radius: 4px;
box-shadow: 0 4px 12px rgba(#000, .1);
text-align: left;
opacity: 0;
visibility: hidden;
&:before {
content: '';
position: absolute;
top: -6px;
left: 20px;
width: 0;
height: 0;
box-shadow: 2px -2px 6px rgba(#000, .05);
border-top: 6px solid #fff;
border-right: 6px solid #fff;
border-bottom: 6px solid transparent;
border-left: 6px solid transparent;
transform: rotate(-45deg);
mix-blend-mode: multiple;
}
li {
z-index: 1;
position: relative;
background: #fff;
padding: 0 20px;
color: #666;
&:first-child {
border-radius: 4px 4px 0 0;
}
&:last-child {
border-radius: 0 0 4px 4px;
a {
border-bottom: 0;
}
}
}
a {
display: block;
border-bottom: 1px solid rgba(#000, .05);
padding: 16px 0;
color: inherit;
font-size: 10px;
text-decoration: none;
}
}
}
#media screen and (max-width: 600px) {
.page-settings {
flex-direction: column;
.btn {
margin: 7% 2%;
}
}
}
The minimal working code is below:
body {
background: #f5f5f5;
height: 100%;
color: rgba(0, 0, 0, 0.87);
font-family: "Roboto", sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1.5em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.btn {
outline: 0;
display: inline-flex;
align-items: center;
justify-content: space-between;
background: #5380f7;
min-width: 260px;
border: 0;
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
box-sizing: border-box;
padding: 16px 20px;
color: #fff;
font-size: 12px;
font-weight: 600;
letter-spacing: 1.2px;
text-transform: uppercase;
overflow: hidden;
cursor: pointer;
}
.btn:focus .dropdown,
.btn:active .dropdown {
transform: translate(0, 20px);
opacity: 1;
visibility: visible;
}
.btn .material-icons {
border-radius: 100%;
-webkit-animation: ripple 0.6s linear infinite;
animation: ripple 0.6s linear infinite;
}
.btn .dropdown {
position: absolute;
top: 100%;
left: 0;
background: #fff;
width: 100%;
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
text-align: left;
opacity: 0;
visibility: hidden;
transition: 0.3s ease;
}
.btn .dropdown:before {
content: "";
position: absolute;
top: -6px;
left: 20px;
width: 0;
height: 0;
box-shadow: 2px -2px 6px rgba(0, 0, 0, 0.05);
border-top: 6px solid #fff;
border-right: 6px solid #fff;
border-bottom: 6px solid rgba(0, 0, 0, 0);
border-left: 6px solid rgba(0, 0, 0, 0);
transform: rotate(-45deg);
mix-blend-mode: multiple;
}
.btn .dropdown li {
z-index: 1;
position: relative;
background: #fff;
padding: 0 20px;
color: #666;
}
.btn .dropdown li.active {
color: #5380f7;
}
.btn .dropdown li:first-child {
border-radius: 4px 4px 0 0;
}
.btn .dropdown li:last-child {
border-radius: 0 0 4px 4px;
}
.btn .dropdown li:last-child a {
border-bottom: 0;
}
.btn .dropdown a {
display: block;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
padding: 16px 0;
color: inherit;
font-size: 10px;
text-decoration: none;
}
#-webkit-keyframes ripple {
0% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1),
0 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 40px rgba(255, 255, 255, 0.1),
0 0 0 60px rgba(255, 255, 255, 0.1);
}
100% {
box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.1),
0 0 0 40px rgba(255, 255, 255, 0.1), 0 0 0 60px rgba(255, 255, 255, 0.1),
0 0 0 80px rgba(255, 255, 255, 0);
}
}
#keyframes ripple {
0% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1),
0 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 40px rgba(255, 255, 255, 0.1),
0 0 0 60px rgba(255, 255, 255, 0.1);
}
100% {
box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.1),
0 0 0 40px rgba(255, 255, 255, 0.1), 0 0 0 60px rgba(255, 255, 255, 0.1),
0 0 0 80px rgba(255, 255, 255, 0);
}
}
<div class="container">
<!-- Btn-->
<button class="btn">
<span>Account Settings</span><i class="material-icons">public</i>
<ul class="dropdown">
<li class="active">Profile Information</li>
<li>Change Password</li>
<li>
Become <b>PRO</b>
</li>
<li>Help</li>
<li>Log Out</li>
</ul>
</button>
<button class="btn">
<span>Account Settings</span><i class="material-icons">public</i>
<ul class="dropdown">
<li class="active">Profile Information</li>
<li>Change Password</li>
<li>
Become <b>PRO</b>
</li>
<li>Help</li>
<li>Log Out</li>
</ul>
</button>
</div>
My Research
I tried to create a new class called .dropdown-menu too, to no avail. Tried changing the position absolute and top+Left positioning to a mix between grid and grid-area, but I couldn't get it to work too.
I've googled it, searched websites and the answers are various, but didn't fit the scope of my problem.
Question
How could I isolate this dropdown-menu with two buttons under the same container?
Thanks!

It just needed a new :has() element on buttons, button:has(.dropdown). The fix was:
button:has(.dropdown) {
&:focus,
&:active {
.dropdown {
transform: translate(0, 20px);
opacity: 1;
visibility: visible;
}
}
}
Don't know why the id selector didn't work, but this way, it's working just fine.

link button has an underline that cannot be removed, and icon turns red when clicked

I made a "button" well... not really, I made a link that redirects the user to my 'whatever' page or whatever.
problem is, it has an annoyying underline that cannot be removed even when i try puttin in CSS text-decoration: none;
why is it happening?
how can i remove it?
also, whenever i click on the button, the LinkedIn icon turns red.. the button is purple and it makes it ugly.. how can i remove the red color when clicked?
when i am hovering next to the box in the 'peticide' chrome extention, i noticed a red line is it related somehow?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.title h1 {
font-size: 36px;
font-family: "Lato", sans-serif;
margin-top: 90px;
margin-left: 860px;
margin-right: 10px;
text-align: center;
/* !!!! !!!! Styling the text and giving it gradient *מדרון* !!!! !!!!*/
color: #ffffff;
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip:text;
-webkit-text-fill-color: transparent;
text-shadow: 6px 6px 0px rgba(0, 0, 0, 0.2);
/* Make sure text is infront of background images */
display: block;
position: relative;
z-index: 3;
}
#keyframes move-twink-back {
from {
background-position: 0 0;
}
to {
background-position: -10000px 5000px;
}
}
#keyframes move-clouds-back {
from {
background-position: 0 0;
}
to {
background-position: 10000px 0;
}
}
.stars,
.twinkling,
.clouds {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
display: block;
}
.stars {
background: #000 url(stars.png) repeat top center;
z-index: 0;
}
.twinkling {
background: transparent url(twinkling.png) repeat top center;
z-index: 1;
animation: move-twink-back 200s linear infinite;
}
.clouds {
background: transparent url(clouds.png) repeat top center;
z-index: 2;
opacity: 0.4;
animation: move-clouds-back 200s linear infinite;
}
.secondarytitle,
h2 {
font-size: 63px;
font-weight: 500;
letter-spacing: 5px;
cursor: pointer;
font-family: "Lato", sans-serif;
margin-top: 90px;
margin-left: 705px;
margin-right: 10px;
text-align: center;
color: #ffffff;
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 6px 6px 0px rgba(0, 0, 0, 0.2);
display: block;
position: absolute;
z-index: 3;
}
body {
display: flex;
min-height: 100vh;
}
.secondarytitle,
h2 span {
transition: 0.5s;
}
.secondarytitle,
h2:hover span:nth-child(1) {
margin-right: 28px;
}
.secondarytitle,
h2:hover span:nth-child(2)::after {
margin-right: 10px;
}
.secondarytitle,
h2:hover span:nth-child(2)::after {
content: "";
margin-left: 10px;
}
.secondarytitle,
h2:hover span {
color: #fff;
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #fff, 0 0 80px #fff,
0 0 120px #fff;
}
table,
tr,
td,
th{
color: #ffffff;
background: -webkit-linear-gradient(#eee, #333);
font-family: "Lato", sans-serif;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 6px 6px 0px rgba(0, 0, 0, 0.2);
z-index: 2;
position: absolute;
font-size: 24px;
font-weight: 600;
}
.tabledata{
top: 400px;
left: 231px;
width: 1200px;
height: 550px;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 6px 6px 0px rgba(0, 0, 0, 0.2);
z-index: 2;
}
.button{
font-size: 27px;
font-weight: 800px;
top: 896px;
left: 1233px;
width: 248px;
height: 46px;
color: #ffffff;
letter-spacing: 4px;
background: -webkit-linear-gradient(#eee, #333);
font-family: "consolas", sans-serif;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 6px 6px 0px rgba(0, 0, 0, 0.2);
z-index: 3;
position: absolute;
transition: 1.7s;
text-decoration: none;
overflow: hidden;
text-transform: uppercase;
display: inline-block;
cursor: pointer;
}
.button:hover
{
color: #ffffff;
background: #ffffff;
box-shadow: 0 0 10px #ffffff, 0 0 40px #ffffff, 0 0 80px #ffffff;
transition-delay: 0.05s;
}
.secondaryButton{
font-size: 27px;
font-weight: 800px;
top: 896px;
left: 236px;
width: 197px;
height: 50px;
color: #ffffff;
letter-spacing: 4px;
background: -webkit-linear-gradient(#eee, #333);
font-family: "consolas", sans-serif;
-webki
<div class="button">
<a href="/project2/contact.html">
<span></span>
<span></span>
<span></span>
<span></span>
contact me
</div>
<div class="secondaryButton">
<a href="https://www.linkedin.com/in/blah-blah/">
<span></span>
<span></span>
<span></span>
<span></span>
linkedIn<ion-icon name="logo-linkedin"></ion-icon>
</div>

your underline is on a link so you have to remove text-decoratuon on a tag. then on a tag :focus change your color. Look at code below if thats help you.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.title h1 {
font-size: 36px;
font-family: "Lato", sans-serif;
margin-top: 90px;
margin-left: 860px;
margin-right: 10px;
text-align: center;
/* !!!! !!!! Styling the text and giving it gradient *מדרון* !!!! !!!!*/
color: #ffffff;
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip:text;
-webkit-text-fill-color: transparent;
text-shadow: 6px 6px 0px rgba(0, 0, 0, 0.2);
/* Make sure text is infront of background images */
display: block;
position: relative;
z-index: 3;
}
#keyframes move-twink-back {
from {
background-position: 0 0;
}
to {
background-position: -10000px 5000px;
}
}
#keyframes move-clouds-back {
from {
background-position: 0 0;
}
to {
background-position: 10000px 0;
}
}
.stars,
.twinkling,
.clouds {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
display: block;
}
.stars {
background: #000 url(stars.png) repeat top center;
z-index: 0;
}
.twinkling {
background: transparent url(twinkling.png) repeat top center;
z-index: 1;
animation: move-twink-back 200s linear infinite;
}
.clouds {
background: transparent url(clouds.png) repeat top center;
z-index: 2;
opacity: 0.4;
animation: move-clouds-back 200s linear infinite;
}
.secondarytitle,
h2 {
font-size: 63px;
font-weight: 500;
letter-spacing: 5px;
cursor: pointer;
font-family: "Lato", sans-serif;
margin-top: 90px;
margin-left: 705px;
margin-right: 10px;
text-align: center;
color: #ffffff;
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 6px 6px 0px rgba(0, 0, 0, 0.2);
display: block;
position: absolute;
z-index: 3;
}
body {
display: flex;
min-height: 100vh;
}
.secondarytitle,
h2 span {
transition: 0.5s;
}
.secondarytitle,
h2:hover span:nth-child(1) {
margin-right: 28px;
}
.secondarytitle,
h2:hover span:nth-child(2)::after {
margin-right: 10px;
}
.secondarytitle,
h2:hover span:nth-child(2)::after {
content: "";
margin-left: 10px;
}
.secondarytitle,
h2:hover span {
color: #fff;
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #fff, 0 0 80px #fff,
0 0 120px #fff;
}
table,
tr,
td,
th{
color: #ffffff;
background: -webkit-linear-gradient(#eee, #333);
font-family: "Lato", sans-serif;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 6px 6px 0px rgba(0, 0, 0, 0.2);
z-index: 2;
position: absolute;
font-size: 24px;
font-weight: 600;
}
.tabledata{
top: 400px;
left: 231px;
width: 1200px;
height: 550px;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 6px 6px 0px rgba(0, 0, 0, 0.2);
z-index: 2;
}
.button{
font-size: 27px;
font-weight: 800px;
top: 896px;
left: 1233px;
width: 248px;
height: 46px;
color: #ffffff;
letter-spacing: 4px;
background: -webkit-linear-gradient(#eee, #333);
font-family: "consolas", sans-serif;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 6px 6px 0px rgba(0, 0, 0, 0.2);
z-index: 3;
position: absolute;
transition: 1.7s;
text-decoration: none;
overflow: hidden;
text-transform: uppercase;
display: inline-block;
cursor: pointer;
}
.button a, .secondaryButton a {text-decoration: none; }
a:focus {color: gray;}
.button:hover
{
color: #ffffff;
background: #ffffff;
box-shadow: 0 0 10px #ffffff, 0 0 40px #ffffff, 0 0 80px #ffffff;
transition-delay: 0.05s;
}
.secondaryButton{
font-size: 27px;
font-weight: 800px;
top: 10px;
left: 236px;
width: 197px;
height: 50px;
color: #ffffff;
letter-spacing: 4px;
background: -webkit-linear-gradient(#eee, #333);
font-family: "consolas", sans-serif;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 6px 6px 0px rgba(0, 0, 0, 0.2);
z-index: 4;
position: absolute;
transition: 1.7s;
text-decoration: none;
overflow: hidden;
display: inline-block;
cursor: pointer;
}
.secondaryButton:hover
{
color: rgb(165, 70, 254);
background: rgb(188, 123, 248);
box-shadow: 0 0 10px rgb(165, 70, 254), 0 0 40px rgb(165, 70, 254), 0 0 80px rgb(165, 70, 254);
transition-delay: 0.05s;
}
<div class="button">
<a href="/project2/contact.html">
<span></span>
<span></span>
<span></span>
<span></span>
contact me</a>
</div>
<div class="secondaryButton">
<a href="https://www.linkedin.com/in/blah-blah/">
<span></span>
<span></span>
<span></span>
<span></span>
linkedIn<ion-social-icon name="logo-linkedin">
</div>

Set the CSS of your tag like this
For example:
<a href='xyx.com' class='style'>
CSS
.style{
text-decoration:none
}

Just add your child selector a to the button classes so your button classes are targeting the anchor element...
.button a{
...
}
.button a:hover
{
...
}
.secondaryButton a{
...
}
A better solution is to remove the div wrappers and move your class into the anchor tag directly and also beef up your anchor CSS selectors with pseudo-classes as shown below so you have more granular control of your links.
.button,
.button:link,
.button:visited,
.button:focus,
.button:active{
...
}
.button:hover
{
...
}
.secondaryButton,
.secondaryButton:link,
.secondaryButton:visited,
.secondaryButton:hover,
.secondaryButton:focus,
.secondaryButton:active{
...
}
<a class="button" href="/project2/contact.html">contact me</a>
<a class="secondaryButton" href="https://www.linkedin.com/in/blah-blah/">linkedIn</a>
'''

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.title h1 {
font-size: 36px;
font-family: "Lato", sans-serif;
margin-top: 90px;
margin-left: 860px;
margin-right: 10px;
text-align: center;
/* !!!! !!!! Styling the text and giving it gradient *מדרון* !!!! !!!!*/
color: #ffffff;
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip:text;
-webkit-text-fill-color: transparent;
text-shadow: 6px 6px 0px rgba(0, 0, 0, 0.2);
/* Make sure text is infront of background images */
display: block;
position: relative;
z-index: 3;
}
#keyframes move-twink-back {
from {
background-position: 0 0;
}
to {
background-position: -10000px 5000px;
}
}
#keyframes move-clouds-back {
from {
background-position: 0 0;
}
to {
background-position: 10000px 0;
}
}
.stars,
.twinkling,
.clouds {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
display: block;
}
.stars {
background: #000 url(stars.png) repeat top center;
z-index: 0;
}
.twinkling {
background: transparent url(twinkling.png) repeat top center;
z-index: 1;
animation: move-twink-back 200s linear infinite;
}
.clouds {
background: transparent url(clouds.png) repeat top center;
z-index: 2;
opacity: 0.4;
animation: move-clouds-back 200s linear infinite;
}
.secondarytitle,
h2 {
font-size: 63px;
font-weight: 500;
letter-spacing: 5px;
cursor: pointer;
font-family: "Lato", sans-serif;
margin-top: 90px;
margin-left: 705px;
margin-right: 10px;
text-align: center;
color: #ffffff;
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 6px 6px 0px rgba(0, 0, 0, 0.2);
display: block;
position: absolute;
z-index: 3;
}
body {
display: flex;
min-height: 100vh;
}
.secondarytitle,
h2 span {
transition: 0.5s;
}
.secondarytitle,
h2:hover span:nth-child(1) {
margin-right: 28px;
}
.secondarytitle,
h2:hover span:nth-child(2)::after {
margin-right: 10px;
}
.secondarytitle,
h2:hover span:nth-child(2)::after {
content: "";
margin-left: 10px;
}
.secondarytitle,
h2:hover span {
color: #fff;
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #fff, 0 0 80px #fff,
0 0 120px #fff;
}
table,
tr,
td,
th{
color: #ffffff;
background: -webkit-linear-gradient(#eee, #333);
font-family: "Lato", sans-serif;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 6px 6px 0px rgba(0, 0, 0, 0.2);
z-index: 2;
position: absolute;
font-size: 24px;
font-weight: 600;
}
.tabledata{
top: 400px;
left: 231px;
width: 1200px;
height: 550px;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 6px 6px 0px rgba(0, 0, 0, 0.2);
z-index: 2;
}
.button{
font-size: 27px;
font-weight: 800px;
top: 896px;
left: 1233px;
width: 248px;
height: 46px;
color: #ffffff;
letter-spacing: 4px;
background: -webkit-linear-gradient(#eee, #333);
font-family: "consolas", sans-serif;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 6px 6px 0px rgba(0, 0, 0, 0.2);
z-index: 3;
position: absolute;
transition: 1.7s;
text-decoration: none;
overflow: hidden;
text-transform: uppercase;
display: inline-block;
cursor: pointer;
}
.button:hover
{
color: #ffffff;
background: #ffffff;
box-shadow: 0 0 10px #ffffff, 0 0 40px #ffffff, 0 0 80px #ffffff;
transition-delay: 0.05s;
}
.button a{
text-decoration : none;`
}
.secondaryButton{
font-size: 27px;
font-weight: 800px;
top: 896px;
left: 236px;
width: 197px;
height: 50px;
color: #ffffff;
letter-spacing: 4px;
background: -webkit-linear-gradient(#eee, #333);
font-family: "consolas", sans-serif;
-webki
/* remove the underline and red color when the button is clicked */
/* .button > a {
text-decoration: none;
}
.button > a:focus{
color: black;
}
.secondaryButton > a{
text-decoration: none;
}
.secondaryButton > a:focus{
color: black;
} */
<div class="button">
<a href="/project2/contact.html">
<span></span>
<span></span>
<span></span>
<span></span>
contact me
</div>
<div class="secondaryButton">
<a href="https://www.linkedin.com/in/blah-blah/">
<span></span>
<span></span>
<span></span>
<span></span>
linkedIn<ion-icon name="logo-linkedin"></ion-icon>
</div>
<!-- I suggest like this to make a button or link, just style it -->
<!-- <div class="button">
Contact me
</div>
<div class="secondaryButton">
LinkedIn
</div> -->
I suggest that if you create a button it's better to use the <button></button> tag, if you want to remove the underline, give the <a> element a style text-decoration:none,and your <a> tag has no closing tag </a>

how do I reposition a styled label to a corner of its div?

How would I move the content inside of .toggle-button to the far right lower corner?
I am new to html and css but from what I understand I've played around with the flex settings, margins, and paddings and I'm not having any luck figuring this out
Here is my code. I am only concerned with the page-header div (color blue border) and the toggle-button div (color purple)
.mypage{
border: 1px solid black;
}
.row {
margin: 10px;
width: 100%;
}
.page-header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
border: 1px solid blue;
margin-right: 1vh;
}
.date-dropdown{
border: 1px solid red;
flex-grow: 1;
display: flex;
}
.dates-label {
font-size: large;
font-family: Arial, Helvetica, sans-serif;
}
.dates-select {
margin-left: 1vh;
}
.title-wrapper {
border: 1px solid orange;
flex-grow: 1;
text-align: center;
}
.toggle-button{
border: 1px solid purple;
flex-grow: 1;
}
/* ============= TOGGLE Button ======= */
.switch {
position: relative;
display: block;
vertical-align: top;
width: 100px;
height: 30px;
padding: 3px;
margin: 0 10px 10px 0;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
border-radius: 18px;
box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
cursor: pointer;
box-sizing:content-box;
}
.switch-input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
box-sizing:content-box;
}
.switch-label {
position: relative;
display: block;
height: inherit;
font-size: 10px;
text-transform: uppercase;
background: #eceeef;
border-radius: inherit;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
box-sizing:content-box;
}
.switch-label:before, .switch-label:after {
position: absolute;
top: 50%;
margin-top: -.5em;
line-height: 1;
-webkit-transition: inherit;
-moz-transition: inherit;
-o-transition: inherit;
transition: inherit;
box-sizing:content-box;
}
.switch-label:before {
content: attr(data-off);
right: 11px;
color: #aaaaaa;
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.switch-label:after {
content: attr(data-on);
left: 11px;
color: #FFFFFF;
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
opacity: 0;
}
.switch-input:checked ~ .switch-label {
background: #E1B42B;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-input:checked ~ .switch-label:before {
opacity: 0;
}
.switch-input:checked ~ .switch-label:after {
opacity: 1;
}
.switch-handle {
position: absolute;
top: 4px;
left: 4px;
width: 28px;
height: 28px;
background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
border-radius: 100%;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch-handle:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -6px 0 0 -6px;
width: 12px;
height: 12px;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
border-radius: 6px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
}
.switch-input:checked ~ .switch-handle {
left: 74px;
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
/* Transition
========================== */
.switch-label, .switch-handle {
transition: All 0.3s ease;
-webkit-transition: All 0.3s ease;
-moz-transition: All 0.3s ease;
-o-transition: All 0.3s ease;
}
.switch-yes-no {
padding: 0;
margin: 15px 0 0;
background: #FFF;
border-radius: 0;
background-image: none;
}
.switch-yes-no .switch-label {
box-shadow: none;
background: none;
}
.switch-yes-no .switch-label:after, .switch-yes-no .switch-label:before {
width: 100%;
height: 70%;
top: 5px;
left: 0;
text-align: center;
padding-top: 10%;
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(0, 0, 0, 0.1);
}
.switch-yes-no .switch-label:after {
color: #FFFFFF;
background: #32CD32;
backface-visibility: hidden;
transform: rotateY(180deg);
}
.switch-yes-no .switch-label:before {
background: #eceeef;
backface-visibility: hidden;
}
.switch-yes-no .switch-handle {
display: none;
}
.switch-yes-no .switch-input:checked ~ .switch-label {
background: #FFF;
border-color: #0088cc;
}
.switch-yes-no .switch-input:checked ~ .switch-label:before {
transform: rotateY(180deg)
}
.switch-yes-no .switch-input:checked ~ .switch-label:after {
transform: rotateY(0)
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5 boilerplate – all you really need…</title>
<link rel="stylesheet" href="css/styles.css">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body id="home">
<div class="mypage">
<div class="row">
<div class="page-header">
<div class="date-dropdown">
<div class="dates-label">
<label for="dropdown">
Choose a date
</label>
</div>
<div class="dates-select">
<select name="dropdown" id="datesid">
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
</select>
</div>
</div>
<div class="title-wrapper">
<h1>Welcome</h1>
</div>
<div class="toggle-button">
<label class="switch switch-yes-no">
<input class="switch-input" type="checkbox" />
<span class="switch-label" data-on="Yes" data-off="No"></span>
<span class="switch-handle"></span>
</label>
</div>
</div>
</div>
<div class="row">
<div class="table-pie-wrapper">
<div class="table">
i am a table
</div>
<div class="pie-graph">
i am a pie graph
</div>
</div>
</div>
<div class="row">
<div class="table-summary-wrapper">
<div class="table-summary">
i am a table summary
</div>
</div>
</div>
</div>
</body>
</html>

I addded following css rules toggle-button class
display: flex;
justify-content: end;
Please check the following code snippet
.mypage{
border: 1px solid black;
}
.row {
margin: 10px;
width: 100%;
}
.page-header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
border: 1px solid blue;
margin-right: 1vh;
}
.date-dropdown{
border: 1px solid red;
flex-grow: 1;
display: flex;
}
.dates-label {
font-size: large;
font-family: Arial, Helvetica, sans-serif;
}
.dates-select {
margin-left: 1vh;
}
.title-wrapper {
border: 1px solid orange;
flex-grow: 1;
text-align: center;
}
.toggle-button{
border: 1px solid purple;
flex-grow: 1;
display: flex;
justify-content: end;
}
/* ============= TOGGLE Button ======= */
.switch {
position: relative;
display: block;
vertical-align: top;
width: 100px;
height: 30px;
padding: 3px;
margin: 0 10px 10px 0;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
border-radius: 18px;
box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
cursor: pointer;
box-sizing:content-box;
}
.switch-input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
box-sizing:content-box;
}
.switch-label {
position: relative;
display: block;
height: inherit;
font-size: 10px;
text-transform: uppercase;
background: #eceeef;
border-radius: inherit;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
box-sizing:content-box;
text-align: right;
background-color: red;
}
.switch-label:before, .switch-label:after {
position: absolute;
top: 50%;
margin-top: -.5em;
line-height: 1;
-webkit-transition: inherit;
-moz-transition: inherit;
-o-transition: inherit;
transition: inherit;
box-sizing:content-box;
}
.switch-label:before {
content: attr(data-off);
right: 11px;
color: #aaaaaa;
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.switch-label:after {
content: attr(data-on);
left: 11px;
color: #FFFFFF;
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
opacity: 0;
}
.switch-input:checked ~ .switch-label {
background: #E1B42B;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-input:checked ~ .switch-label:before {
opacity: 0;
}
.switch-input:checked ~ .switch-label:after {
opacity: 1;
}
.switch-handle {
position: absolute;
top: 4px;
left: 4px;
width: 28px;
height: 28px;
background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
border-radius: 100%;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch-handle:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -6px 0 0 -6px;
width: 12px;
height: 12px;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
border-radius: 6px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
}
.switch-input:checked ~ .switch-handle {
left: 74px;
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
/* Transition
========================== */
.switch-label, .switch-handle {
transition: All 0.3s ease;
-webkit-transition: All 0.3s ease;
-moz-transition: All 0.3s ease;
-o-transition: All 0.3s ease;
}
.switch-yes-no {
padding: 0;
margin: 15px 0 0;
background: #FFF;
border-radius: 0;
background-image: none;
}
.switch-yes-no .switch-label {
box-shadow: none;
background: none;
}
.switch-yes-no .switch-label:after, .switch-yes-no .switch-label:before {
width: 100%;
height: 70%;
top: 5px;
left: 0;
text-align: center;
padding-top: 10%;
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(0, 0, 0, 0.1);
}
.switch-yes-no .switch-label:after {
color: #FFFFFF;
background: #32CD32;
backface-visibility: hidden;
transform: rotateY(180deg);
}
.switch-yes-no .switch-label:before {
background: #eceeef;
backface-visibility: hidden;
}
.switch-yes-no .switch-handle {
display: none;
}
.switch-yes-no .switch-input:checked ~ .switch-label {
background: #FFF;
border-color: #0088cc;
}
.switch-yes-no .switch-input:checked ~ .switch-label:before {
transform: rotateY(180deg)
}
.switch-yes-no .switch-input:checked ~ .switch-label:after {
transform: rotateY(0)
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5 boilerplate – all you really need…</title>
<link rel="stylesheet" href="css/styles.css">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body id="home">
<div class="mypage">
<div class="row">
<div class="page-header">
<div class="date-dropdown">
<div class="dates-label">
<label for="dropdown">
Choose a date
</label>
</div>
<div class="dates-select">
<select name="dropdown" id="datesid">
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
</select>
</div>
</div>
<div class="title-wrapper">
<h1>Welcome</h1>
</div>
<div class="toggle-button">
<label class="switch switch-yes-no">
<input class="switch-input" type="checkbox" />
<span class="switch-label" data-on="Yes" data-off="No"></span>
<span class="switch-handle"></span>
</label>
</div>
</div>
</div>
<div class="row">
<div class="table-pie-wrapper">
<div class="table">
i am a table
</div>
<div class="pie-graph">
i am a pie graph
</div>
</div>
</div>
<div class="row">
<div class="table-summary-wrapper">
<div class="table-summary">
i am a table summary
</div>
</div>
</div>
</div>
</body>
</html>

You can achieve this with margin-left: auto or in the shorthand that you used:
.switch-yes-no {
...
margin: 15px 0 0 auto;
}
Working example:
.mypage {
border: 1px solid black;
}
.row {
margin: 10px;
width: 100%;
}
.page-header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
border: 1px solid blue;
margin-right: 1vh;
}
.date-dropdown {
border: 1px solid red;
flex-grow: 1;
display: flex;
}
.dates-label {
font-size: large;
font-family: Arial, Helvetica, sans-serif;
}
.dates-select {
margin-left: 1vh;
}
.title-wrapper {
border: 1px solid orange;
flex-grow: 1;
text-align: center;
}
.toggle-button {
border: 1px solid purple;
flex-grow: 1;
}
/* ============= TOGGLE Button ======= */
.switch {
position: relative;
display: block;
vertical-align: top;
width: 100px;
height: 30px;
padding: 3px;
margin: 0 10px 10px 0;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
border-radius: 18px;
box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
cursor: pointer;
box-sizing: content-box;
}
.switch-input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
box-sizing: content-box;
}
.switch-label {
position: relative;
display: block;
height: inherit;
font-size: 10px;
text-transform: uppercase;
background: #eceeef;
border-radius: inherit;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
box-sizing: content-box;
}
.switch-label:before,
.switch-label:after {
position: absolute;
top: 50%;
margin-top: -.5em;
line-height: 1;
-webkit-transition: inherit;
-moz-transition: inherit;
-o-transition: inherit;
transition: inherit;
box-sizing: content-box;
}
.switch-label:before {
content: attr(data-off);
right: 11px;
color: #aaaaaa;
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.switch-label:after {
content: attr(data-on);
left: 11px;
color: #FFFFFF;
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
opacity: 0;
}
.switch-input:checked~.switch-label {
background: #E1B42B;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-input:checked~.switch-label:before {
opacity: 0;
}
.switch-input:checked~.switch-label:after {
opacity: 1;
}
.switch-handle {
position: absolute;
top: 4px;
left: 4px;
width: 28px;
height: 28px;
background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
border-radius: 100%;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch-handle:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -6px 0 0 -6px;
width: 12px;
height: 12px;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
border-radius: 6px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
}
.switch-input:checked~.switch-handle {
left: 74px;
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
/* Transition
========================== */
.switch-label,
.switch-handle {
transition: All 0.3s ease;
-webkit-transition: All 0.3s ease;
-moz-transition: All 0.3s ease;
-o-transition: All 0.3s ease;
}
.switch-yes-no {
padding: 0;
margin: 15px 0 0 auto;
background: #FFF;
border-radius: 0;
background-image: none;
}
.switch-yes-no .switch-label {
box-shadow: none;
background: none;
}
.switch-yes-no .switch-label:after,
.switch-yes-no .switch-label:before {
width: 100%;
height: 70%;
top: 5px;
left: 0;
text-align: center;
padding-top: 10%;
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(0, 0, 0, 0.1);
}
.switch-yes-no .switch-label:after {
color: #FFFFFF;
background: #32CD32;
backface-visibility: hidden;
transform: rotateY(180deg);
}
.switch-yes-no .switch-label:before {
background: #eceeef;
backface-visibility: hidden;
}
.switch-yes-no .switch-handle {
display: none;
}
.switch-yes-no .switch-input:checked~.switch-label {
background: #FFF;
border-color: #0088cc;
}
.switch-yes-no .switch-input:checked~.switch-label:before {
transform: rotateY(180deg)
}
.switch-yes-no .switch-input:checked~.switch-label:after {
transform: rotateY(0)
}
<div class="mypage">
<div class="row">
<div class="page-header">
<div class="date-dropdown">
<div class="dates-label">
<label for="dropdown">
Choose a date
</label>
</div>
<div class="dates-select">
<select name="dropdown" id="datesid">
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
</select>
</div>
</div>
<div class="title-wrapper">
<h1>Welcome</h1>
</div>
<div class="toggle-button">
<label class="switch switch-yes-no">
<input class="switch-input" type="checkbox" />
<span class="switch-label" data-on="Yes" data-off="No"></span>
<span class="switch-handle"></span>
</label>
</div>
</div>
</div>
<div class="row">
<div class="table-pie-wrapper">
<div class="table">
i am a table
</div>
<div class="pie-graph">
i am a pie graph
</div>
</div>
</div>
<div class="row">
<div class="table-summary-wrapper">
<div class="table-summary">
i am a table summary
</div>
</div>
</div>
</div>
If you want the whole button to be in the right bottom corner you can use align-self: flex-end:
.toggle-button {
...
align-self: flex-end;
}
Working example:
.mypage {
border: 1px solid black;
}
.row {
margin: 10px;
width: 100%;
}
.page-header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
border: 1px solid blue;
margin-right: 1vh;
}
.date-dropdown {
border: 1px solid red;
flex-grow: 1;
display: flex;
}
.dates-label {
font-size: large;
font-family: Arial, Helvetica, sans-serif;
}
.dates-select {
margin-left: 1vh;
}
.title-wrapper {
border: 1px solid orange;
flex-grow: 1;
text-align: center;
}
.toggle-button {
border: 1px solid purple;
flex-grow: 1;
align-self: flex-end;
}
/* ============= TOGGLE Button ======= */
.switch {
position: relative;
display: block;
vertical-align: top;
width: 100px;
height: 30px;
padding: 3px;
margin: 0 10px 10px 0;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
border-radius: 18px;
box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
cursor: pointer;
box-sizing: content-box;
}
.switch-input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
box-sizing: content-box;
}
.switch-label {
position: relative;
display: block;
height: inherit;
font-size: 10px;
text-transform: uppercase;
background: #eceeef;
border-radius: inherit;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
box-sizing: content-box;
}
.switch-label:before,
.switch-label:after {
position: absolute;
top: 50%;
margin-top: -.5em;
line-height: 1;
-webkit-transition: inherit;
-moz-transition: inherit;
-o-transition: inherit;
transition: inherit;
box-sizing: content-box;
}
.switch-label:before {
content: attr(data-off);
right: 11px;
color: #aaaaaa;
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.switch-label:after {
content: attr(data-on);
left: 11px;
color: #FFFFFF;
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
opacity: 0;
}
.switch-input:checked~.switch-label {
background: #E1B42B;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-input:checked~.switch-label:before {
opacity: 0;
}
.switch-input:checked~.switch-label:after {
opacity: 1;
}
.switch-handle {
position: absolute;
top: 4px;
left: 4px;
width: 28px;
height: 28px;
background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
border-radius: 100%;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch-handle:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -6px 0 0 -6px;
width: 12px;
height: 12px;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
border-radius: 6px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
}
.switch-input:checked~.switch-handle {
left: 74px;
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
/* Transition
========================== */
.switch-label,
.switch-handle {
transition: All 0.3s ease;
-webkit-transition: All 0.3s ease;
-moz-transition: All 0.3s ease;
-o-transition: All 0.3s ease;
}
.switch-yes-no {
padding: 0;
margin: 15px 0 0;
background: #FFF;
border-radius: 0;
background-image: none;
}
.switch-yes-no .switch-label {
box-shadow: none;
background: none;
}
.switch-yes-no .switch-label:after,
.switch-yes-no .switch-label:before {
width: 100%;
height: 70%;
top: 5px;
left: 0;
text-align: center;
padding-top: 10%;
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(0, 0, 0, 0.1);
}
.switch-yes-no .switch-label:after {
color: #FFFFFF;
background: #32CD32;
backface-visibility: hidden;
transform: rotateY(180deg);
}
.switch-yes-no .switch-label:before {
background: #eceeef;
backface-visibility: hidden;
}
.switch-yes-no .switch-handle {
display: none;
}
.switch-yes-no .switch-input:checked~.switch-label {
background: #FFF;
border-color: #0088cc;
}
.switch-yes-no .switch-input:checked~.switch-label:before {
transform: rotateY(180deg)
}
.switch-yes-no .switch-input:checked~.switch-label:after {
transform: rotateY(0)
}
<div class="mypage">
<div class="row">
<div class="page-header">
<div class="date-dropdown">
<div class="dates-label">
<label for="dropdown">
Choose a date
</label>
</div>
<div class="dates-select">
<select name="dropdown" id="datesid">
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
</select>
</div>
</div>
<div class="title-wrapper">
<h1>Welcome</h1>
</div>
<div class="toggle-button">
<label class="switch switch-yes-no">
<input class="switch-input" type="checkbox" />
<span class="switch-label" data-on="Yes" data-off="No"></span>
<span class="switch-handle"></span>
</label>
</div>
</div>
</div>
<div class="row">
<div class="table-pie-wrapper">
<div class="table">
i am a table
</div>
<div class="pie-graph">
i am a pie graph
</div>
</div>
</div>
<div class="row">
<div class="table-summary-wrapper">
<div class="table-summary">
i am a table summary
</div>
</div>
</div>
</div>

Im trying to create an navigation menu in ionic but it's unclickable and cuts off my ion-content

So I'm new to ionic and to get started I am truing to recreate a blog I had made so that it is not only accessible as a website but as a cross-platform mobile application as well. I was working on the top nav bar when I ran into a problem - the links were not clickable, just static as if were text and only seem responsive in mobile view and even then the menu cuts off the content. I have tried to post as little code as possible but have the files with me so i can add as comments if need be. Thank you in advance
I have tried moving the app-nav tag around, adding (click) which i didnt think i had to if i used routerlink. Adding a toolbar solves the cutting off problem but further eventuates the unresponsiveness as even in mobile view it is unresponsive.
//index.html
<head>
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<link rel="icon" type="image/png" href="assets/icon/favicon.png" />
<!-- add to homescreen for ios -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.0.13/css/solid.css'>
<link rel="stylesheet" href="assets/css/navstyle.css">
</head>
<body>
<app-root></app-root>
</body>
</html>
//nav.component.html
<nav>
<div class="nav-fostrap" [ngClass]="{'visible': mobileMenu}">
<ul>
<li><a routerLink="/blogs">Home</a></li>
<li><a routerLink="">About</a></li>
<li><a routerLink="">News </a></li>
<li><a>About<span class="arrow-down"></span></a>
<ul class="dropdown">
<li><a routerLink="">News </a></li>
</ul>
</li>
<li><a routerLink="">Contact</a></li>
</ul>
</div>
<div class="nav-bg-fostrap" >
<div class="navbar-fostrap" (click)="mobileMenuExpand()"> <span></span> <span></span> <span></span> </div>
<a routerLink="" class="title-mobile">A2E</a>
</div>
</nav>
<ion-router-outlet main></ion-router-outlet>
nav.component.ts
mobileMenuExpand()
{
this.mobileMenu = !this.mobileMenu
}
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: #F0F0F0;
font-size: 15px;
color: #666;
font-family: 'Roboto', sans-serif;
}
.content {
height: 200px;
}
a { text-decoration: none; }
.container {
max-width: 1200px;
margin: 0 auto;
width: 100%;
}
.nav-fostrap {
display: block;
margin-bottom: 15px 0;
background: #03A9F4;
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
border-radius: 3px;
}
.nav-fostrap ul {
list-style-type: none;
margin: 0;
padding: 0;
display: block;
}
.nav-fostrap li {
list-style-type: none;
margin: 0;
padding: 0;
display: inline-block;
position: relative;
font-size: 14;
color: #def1f0;
}
.nav-fostrap li a {
padding: 15px 20px;
font-size: 14;
color: #def1f0;
display: inline-block;
outline: 0;
font-weight: 400;
}
.nav-fostrap li:hover ul.dropdown { display: block; }
.nav-fostrap li ul.dropdown {
position: absolute;
display: none;
width: 200px;
background: #2980B9;
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
padding-top: 0;
}
.nav-fostrap li ul.dropdown li {
display: block;
list-style-type: none;
}
.nav-fostrap li ul.dropdown li a {
padding: 15px 20px;
font-size: 15px;
color: #fff;
display: block;
font-weight: 400;
}
.nav-fostrap li ul.dropdown li:last-child a { border-bottom: none; }
.nav-fostrap li:hover a {
background: #2980B9;
color: #fff !important;
}
.nav-fostrap li:first-child:hover a { border-radius: 3px 0 0 3px; }
.nav-fostrap li ul.dropdown li:hover a { background: rgba(0,0,0, .1); }
.nav-fostrap li ul.dropdown li:first-child:hover a { border-radius: 0; }
.nav-fostrap li:hover .arrow-down { border-top: 5px solid #fff; }
.arrow-down {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #def1f0;
position: relative;
top: 15px;
right: -5px;
content: '';
}
.title-mobile {
display: none;
}
#media only screen and (max-width:900px) {
.nav-fostrap {
background: #fff;
width: 200px;
height: 100%;
display: block;
position: fixed;
left: -200px;
top: 0px;
-webkit-transition: left 0.25s ease;
-moz-transition: left 0.25s ease;
-ms-transition: left 0.25s ease;
-o-transition: left 0.25s ease;
transition: left 0.25s ease;
margin: 0;
border: 0;
border-radius: 0;
overflow-y: auto;
overflow-x: hidden;
height: 100%;
}
.title-mobile {
position: fixed;
display: block;
top: 10px;
font-size: 20px;
left: 100px;
right: 100px;
text-align: center;
color: #FFF;
}
.nav-fostrap.visible {
left: 0px;
-webkit-transition: left 0.25s ease;
-moz-transition: left 0.25s ease;
-ms-transition: left 0.25s ease;
-o-transition: left 0.25s ease;
transition: left 0.25s ease;
}
.nav-bg-fostrap {
display: inline-block;
vertical-align: middle;
width: 100%;
height: 50px;
margin: 0;
position: absolute;
top: 0px;
left: 0px;
background: #03A9F4;
padding: 12px 0 0 10px;
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}
.navbar-fostrap {
display: inline-block;
vertical-align: middle;
height: 50px;
cursor: pointer;
margin: 0;
position: absolute;
top: 0;
left: 0;
padding: 12px;
}
.navbar-fostrap span {
height: 2px;
background: #fff;
margin: 5px;
display: block;
width: 20px;
}
.navbar-fostrap span:nth-child(2) { width: 20px; }
.navbar-fostrap span:nth-child(3) { width: 20px; }
.nav-fostrap ul { padding-top: 50px; }
.nav-fostrap li { display: block; }
.nav-fostrap li a {
display: block;
color: #505050;
font-weight: 600;
}
.nav-fostrap li:first-child:hover a { border-radius: 0; }
.nav-fostrap li ul.dropdown { position: relative; }
.nav-fostrap li ul.dropdown li a {
background: #2980B9 !important;
border-bottom: none;
color: #fff !important;
}
.nav-fostrap li:hover a {
background: #03A9F4;
color: #fff !important;
}
.nav-fostrap li ul.dropdown li:hover a {
background: rgba(0,0,0,.1); !important;
color: #fff !important;
}
.nav-fostrap li ul.dropdown li a { padding: 10px 10px 10px 30px; }
.nav-fostrap li:hover .arrow-down { border-top: 5px solid #fff; }
.arrow-down {
border-top: 5px solid #505050;
position: absolute;
top: 20px;
right: 10px;
}
.cover-bg {
background: rgba(0,0,0,0.5);
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#media only screen and (max-width:1199px) {
.container { width: 96%; }
}
.fixed-top {
position: fixed;
top: 0;
right: 0;
left: 0;
}
//blogs.pag.html
<ion-header>
<app-nav></app-nav>
</ion-header>
<ion-content class="has-header">
<ion-list>
<app-blog-item *ngFor="let blog of blogs" [blog]='blog'></app-blog-item>
</ion-list>
</ion-content>
I am trying recreate an active navbar that works on ionic as to have a fluid mobile and web experience :< i have tried to post as little code as possible but have the files with me so i can add as comments if need be

Align label contents after checkbox css

I have styled Checkbox from this source as below:
.toggle-button {
margin: 0 20px;
}
/*
* Toggle button styles
*/
.toggle-button {
position: relative;
display: inline-block;
color: rgb(80, 77, 77);
}
.toggle-button label {
display: inline-block;
cursor: pointer;
text-align: left;
}
.toggle-button input {
display: none;
}
.toggle-button__icon {
cursor: pointer;
pointer-events: none;
}
.toggle-button__icon:before,
.toggle-button__icon:after {
content: "";
position: absolute;
top: 45%;
left: 35%;
transition: 0.2s ease-out;
}
.toggle-button--tuli label {
line-height: 20px;
text-indent: 30px;
}
.toggle-button--tuli input[type=checkbox]:checked~.toggle-button__icon {
background: #fff;
}
.toggle-button--tuli input[type=checkbox]:checked~.toggle-button__icon:before,
.toggle-button--tuli input[type=checkbox]:checked~.toggle-button__icon:after {
opacity: 1;
}
.toggle-button--tuli .toggle-button__icon {
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
transition: all 0.2s;
border: 2px solid rgb(37, 146, 236);
border-radius: 1px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
.toggle-button--tuli .toggle-button__icon:before,
.toggle-button--tuli .toggle-button__icon:after {
top: 5px;
left: 2px;
width: 12px;
height: 2px;
border-radius: 3px;
background: #fff;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
top: 35%;
background: #0175b2;
opacity: 0;
transform-origin: left center;
}
.toggle-button--tuli .toggle-button__icon:before {
transform: translate(0, 0) rotate(45deg) scale(0.6, 1);
}
.toggle-button--tuli .toggle-button__icon:after {
transform: translate(4px, 6px) rotate(-45deg);
}
.toggle-button--tuli:hover input[type=checkbox]:not(:checked)~.toggle-button__icon {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="toggle-button toggle-button--tuli">
<input id="toggleButton11" type="checkbox">
<label for="toggleButton11">I confirm that I have read and agree to the Terms of Use specified by the client and some long text to continue with to show the alignment below checkbox</label>
<div class="toggle-button__icon"></div>
</div>
If you run the snippet you can see that when label contents break the line it comes below the checkbox. How can I modify the css to align label contents to appear after the checkbox. I've tried text-indent but that only works for 1st line. Hope to find some help.

Instead of text-indent use padding-left and it will work as you wish:
.toggle-button {
margin: 0 20px;
}
/*
* Toggle button styles
*/
.toggle-button {
position: relative;
display: inline-block;
color: rgb(80, 77, 77);
}
.toggle-button label {
display: inline-block;
cursor: pointer;
text-align: left;
}
.toggle-button input {
display: none;
}
.toggle-button__icon {
cursor: pointer;
pointer-events: none;
}
.toggle-button__icon:before,
.toggle-button__icon:after {
content: "";
position: absolute;
top: 45%;
left: 35%;
transition: 0.2s ease-out;
}
.toggle-button--tuli label {
line-height: 20px;
padding-left: 30px;
}
.toggle-button--tuli input[type=checkbox]:checked~.toggle-button__icon {
background: #fff;
}
.toggle-button--tuli input[type=checkbox]:checked~.toggle-button__icon:before,
.toggle-button--tuli input[type=checkbox]:checked~.toggle-button__icon:after {
opacity: 1;
}
.toggle-button--tuli .toggle-button__icon {
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
transition: all 0.2s;
border: 2px solid rgb(37, 146, 236);
border-radius: 1px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
.toggle-button--tuli .toggle-button__icon:before,
.toggle-button--tuli .toggle-button__icon:after {
top: 5px;
left: 2px;
width: 12px;
height: 2px;
border-radius: 3px;
background: #fff;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
top: 35%;
background: #0175b2;
opacity: 0;
transform-origin: left center;
}
.toggle-button--tuli .toggle-button__icon:before {
transform: translate(0, 0) rotate(45deg) scale(0.6, 1);
}
.toggle-button--tuli .toggle-button__icon:after {
transform: translate(4px, 6px) rotate(-45deg);
}
.toggle-button--tuli:hover input[type=checkbox]:not(:checked)~.toggle-button__icon {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="toggle-button toggle-button--tuli">
<input id="toggleButton11" type="checkbox">
<label for="toggleButton11">I confirm that I have read and agree to the Terms of Use specified by the client and some long text to continue with to show the alignment below checkbox</label>
<div class="toggle-button__icon"></div>
</div>

For the label, use padding instead of text-indent:
.toggle-button--tuli label {
line-height: 20px;
padding-left: 30px;
}
It will add padding left for the text and the button will be aligned to the left side because it is positioned absolutely.

If you remove the text-indent and instead use padding-left that should work.
.toggle-button {
margin: 0 20px;
}
/*
* Toggle button styles
*/
.toggle-button {
position: relative;
display: inline-block;
color: rgb(80, 77, 77);
}
.toggle-button label {
display: inline-block;
cursor: pointer;
text-align: left;
}
.toggle-button input {
display: none;
}
.toggle-button__icon {
cursor: pointer;
pointer-events: none;
}
.toggle-button__icon:before,
.toggle-button__icon:after {
content: "";
position: absolute;
top: 45%;
left: 35%;
transition: 0.2s ease-out;
}
.toggle-button--tuli label {
line-height: 20px;
padding-left: 30px;
}
.toggle-button--tuli input[type=checkbox]:checked~.toggle-button__icon {
background: #fff;
}
.toggle-button--tuli input[type=checkbox]:checked~.toggle-button__icon:before,
.toggle-button--tuli input[type=checkbox]:checked~.toggle-button__icon:after {
opacity: 1;
}
.toggle-button--tuli .toggle-button__icon {
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
transition: all 0.2s;
border: 2px solid rgb(37, 146, 236);
border-radius: 1px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
.toggle-button--tuli .toggle-button__icon:before,
.toggle-button--tuli .toggle-button__icon:after {
top: 5px;
left: 2px;
width: 12px;
height: 2px;
border-radius: 3px;
background: #fff;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
top: 35%;
background: #0175b2;
opacity: 0;
transform-origin: left center;
}
.toggle-button--tuli .toggle-button__icon:before {
transform: translate(0, 0) rotate(45deg) scale(0.6, 1);
}
.toggle-button--tuli .toggle-button__icon:after {
transform: translate(4px, 6px) rotate(-45deg);
}
.toggle-button--tuli:hover input[type=checkbox]:not(:checked)~.toggle-button__icon {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="toggle-button toggle-button--tuli">
<input id="toggleButton11" type="checkbox">
<label for="toggleButton11">I confirm that I have read and agree to the Terms of Use specified by the client and some long text to continue with to show the alignment below checkbox</label>
<div class="toggle-button__icon"></div>
</div>
I've updated the answer. padding-left will allow the click to to be detected.

.toggle-button {
margin: 0 20px;
position: relative;
display: inline-block;
color: #504d4d
}
.toggle-button__icon {
cursor: pointer;
pointer-events: none
}
.toggle-button label {
display: inline-block;
cursor: pointer;
text-align: left
}
.toggle-button input {
display: none
}
.toggle-button--tuli label {
line-height: 20px;
padding-left: 25px
}
.toggle-button__icon:before,
.toggle-button__icon:after {
content: "";
position: absolute;
top: 45%;
left: 35%;
transition: .2s ease-out
}
.toggle-button--tuli input[type=checkbox]:checked~.toggle-button__icon {
background: #fff
}
.toggle-button--tuli input[type=checkbox]:checked~.toggle-button__icon:before,
.toggle-button--tuli input[type=checkbox]:checked~.toggle-button__icon:after {
opacity: 1
}
.toggle-button--tuli .toggle-button__icon {
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
transition: all .2s;
border: 2px solid #2592ec;
border-radius: 1px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1)
}
.toggle-button--tuli .toggle-button__icon:before,
.toggle-button--tuli .toggle-button__icon:after {
top: 5px;
left: 2px;
width: 12px;
height: 2px;
border-radius: 3px;
background: #fff;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
top: 35%;
background: #0175b2;
opacity: 0;
transform-origin: left center
}
.toggle-button--tuli .toggle-button__icon:before {
transform: translate(0, 0) rotate(45deg) scale(0.6, 1)
}
.toggle-button--tuli .toggle-button__icon:after {
transform: translate(4px, 6px) rotate(-45deg)
}
.toggle-button--tuli:hover input[type=checkbox]:not(:checked)~.toggle-button__icon {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2)
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="toggle-button toggle-button--tuli">
<input id="toggleButton11" type="checkbox">
<label for="toggleButton11">I confirm that I have read and agree to the Terms of Use specified by the client and some long text to continue with to show the alignment below checkbox</label>
<div class="toggle-button__icon"></div>
</div>
Here you go

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="checkbox">
<label><input type="checkbox"> I confirm that I have read and agree to the Terms
of Use specified by the client and some long text to continue with to show the alignment below checkbox
I confirm that I have read and agree to the Terms
of Use specified by the client and some long text to continue with to show the alignment below checkbox</label>
</div>
Try this code..

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

How to make the animation play when the radio button is checked? - html

Related

Can I isolate dropdown menu under the same container?

link button has an underline that cannot be removed, and icon turns red when clicked

how do I reposition a styled label to a corner of its div?

Im trying to create an navigation menu in ionic but it's unclickable and cuts off my ion-content

Align label contents after checkbox css

Categories

Resources