HTML
<head>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
</head>
<body>
<div class="box one">wait</div>
<div class="box two">text</div>
<div class="box three">move</div>
<div class="box four">none</div>
<div class="box five">sw-resize</div>
<div class="box six">cell</div>
<div class="box seven">zoom-in</div>
<div class="box eight">pointer</div>
<div class="box nine">not-allowed</div>
<div class="box ten">help</div>
</body>
CSS
.box {
color: white;
font-size: 30px;
font-family: 'Oswald', sans-serif;
text-align: center;
line-height: 100px;
text-shadow: 1px 1px 1px black;
width: 100px; height: 100px;
margin-left: 10px;
margin-top: 25px;
transition-duration: 0.5s;
}
.one {
background-color: mediumspringgreen;
cursor: wait;
}
.two {
background-color: skyblue;
cursor: text;
}
.three {
background-color: yellow;
cursor: move;
}
.four {
background-color: salmon;
cursor: none;
}
.five {
background-color: gray;
cursor: sw-resize;
font-size: 20px;
}
.six {
background-color: peru;
cursor: cell;
}
.seven {
background-color: tomato;
cursor: zoom-in;
}
.eight {
background-color: chartreuse;
cursor: pointer;
}
.nine {
background-color: darkorchid;
cursor: not-allowed;
font-size: 20px;
}
.ten {
background-color: darkcyan;
cursor: help;
}
.box:hover {
transform: scale(1.25);
}
3 Responses