html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"></meta>
<title>on of button </title>
</head>
<body>
<div class="button1">
<input type="checkbox" name="">
</div>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
body
{
margin: 0;
padding: 0 ;
background : #262626 ;
}
.button1{
position: absolute;
top: 50%;
left: 50% ;
transform: translate(-50%,-50% );
}
input[type="checkbox"]
{
position : relative ;
width : 350px ;
height : 200px ;
-webkit-appearance : none ;
background : grey ;
outline :none ;
border-radius : 100px ;
box-shadow : inset 0 0 22px rgba(0,0,0,.2);
transition : .5s ;
}
input:checked[type="checkbox"]
Enter to Rename, Shift+Enter to Preview
js
js
1
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run