<!doctype html>
<html>
<head>
<style>
#root{
width:30px;
height:30px;
display:-webkit-box;
-webkit-box-orient:horizontal;
-webkit-box-pack:center;
-webkit-box-align:center;
}
#handler{
display:block;
width:15px;
height:15px;
border-radius:50px;
color:#fff;
box-shadow:1px 1px 2px #000;
background:#cccbbb;
opacity:0.95;
}
#handler:hover{
color:#eee;
opacity:1;
-webkit-transform: scale(1.2,1.2);
}
body{
padding:0px;
margin:0px;
}
</style>
<script>
function triggerState(){
console.log("Clicked");
}
</script>
</head>
<body>
<div id="root">
<div id="handler" onclick="javascript:triggerState()">
</div>
</div>
</body>
</html>
This code places div relative to size of parent and positions in center
No comments:
Post a Comment