<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!doctype html>
<html>
<head>
<title>
<h1>Калькулятор здоровья</h1>
</title>
<meta charset="UTF-8">
<link rel="icon" href="">
<link rel="stylesheet" href="test.css">
</head>
<body>
<div id="content">
<!--<h1>Калькулятор здоровья</h1>
<input type="number" id="age" placeholder="Ваш возраст"/><br>
<input type="number" id="weight" placeholder="Ваш вес в кг"/><br>
<input type="number" id="height" placeholder="Ваш рост в см"/><br>
<input id = "male" class ="radio_male" type="radio" name="sex" checked/>Мужчина<br>
<input id = "female" class ="radio_female" type="radio" name="sex" />Женщина<br>
<button id="button" onclick="calPerDay()">Расчитать</button>-->
<label class="checkbox-green">
<input type="checkbox">
<span class="checkbox-green-switch" data-label-on="Женщина" data-label-off="Мужчина"></span>
</label>
<p>
<div id="total" style="display: none">
Текст
</div>
</p>
</div>
<script src="function.js" type="text/javascript"></script>
</body>
</html>
body{
background: rgb(198,228,12);
background: linear-gradient(45deg,
rgba(198,228,12,1) 0%,
rgba(67,253,29,1) 50%,
rgba(69,252,158,1) 100%);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: fixed;
}
.checkbox-green {
display: inline-block;
height: 100px;
line-height: 100px;
margin-right: 10px;
position: relative;
vertical-align: middle;
font-size: 14px;
user-select: none;
}
.checkbox-green .checkbox-green-switch {
display: inline-block;
height: 50px;
width: 300px;
box-sizing: border-box;
position: relative;
border-radius: 3px;
background: #df709a;
transition: background-color 0.3s cubic-bezier(0, 1, 0.5, 1);
}
.checkbox-green .checkbox-green-switch:before {
content: attr(data-label-on);
display: inline-block;
box-sizing: border-box;
width: 45px;
padding: 0 12px;
position: absolute;
top: 0;
left: 145px;
text-transform: uppercase;
text-align: center;
color: rgb(255, 255, 255);
font-size: 25px; /* размер текста под кнопкой*/
line-height: 50px; /* отступ текста сверху*/
}
.checkbox-green .checkbox-green-switch:after {
content: attr(data-label-off);
display: inline-block;
box-sizing: border-box;
width: 150px; /* ширина кнопки*/
height: 45px; /* высота кнопки*/
border-radius: 3px;
position: absolute;
top: 2px;
left: 2px;
z-index: 5;
text-transform: uppercase;
text-align: center;
/*background: rgb(168, 164, 164);*/
background: rgb(150,150,150);
background: linear-gradient(0deg, rgba(150,150,150,1) 0%, rgba(228,228,228,1) 100%);
line-height: 26px; /* отступ текста сверху*/
font-size: 0px; /* размер текста на кнопке*/
color: #777;
transition: transform 0.3s cubic-bezier(0, 1, 0.5, 1);
}
.checkbox-green input[type="checkbox"] {
display: block;
width: 0;
height: 0;
position: absolute;
z-index: -1;
opacity: 0;
}
.checkbox-green input[type="checkbox"]:checked + .checkbox-green-switch {
background-color: #886cd6;
}
.checkbox-green input[type="checkbox"]:checked + .checkbox-green-switch:before {
content: attr(data-label-off);
left: 0;
}
.checkbox-green input[type="checkbox"]:checked + .checkbox-green-switch:after {
content: attr(data-label-on);
color: #5b52b1;
transform: translate3d(146px, 0, 0); /*движение кнопки вправо*/
}
/* Hover */
.checkbox-green input[type="checkbox"]:not(:disabled) + .checkbox-green-switch:hover {
cursor: pointer;
}
.checkbox-green input[type="checkbox"]:not(:disabled) + .checkbox-green-switch:hover:after {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);
}
/* Disabled */
.checkbox-green input[type=checkbox]:disabled + .checkbox-green-switch {
opacity: 0.6;
filter: grayscale(50%);
}
/* Focus */
.checkbox-green.focused .checkbox-green-switch:after {
box-shadow: inset 0px 0px 4px #ff5623;
}
