<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Space+Mono" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>051518</title>
</head>
<body>
<section class="main">
<div class="main__button" data-tool="round rotate to left">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<g id="Bounding_Boxes">
<g id="ui_x5F_spec_x5F_header_copy_2">
</g>
<path fill="none" d="M0,0h24v24H0V0z"/>
</g>
<g id="Rounded">
<g id="ui_x5F_spec_x5F_header_copy_6">
</g>
<path d="M6.56,7.98L6.56,7.98C6.1,7.52,5.31,7.6,5,8.17c-0.28,0.51-0.5,1.03-0.67,1.58C4.14,10.38,4.64,11,5.29,11h0.01 c0.43,0,0.82-0.28,0.94-0.7c0.12-0.4,0.28-0.79,0.48-1.17C6.94,8.76,6.87,8.29,6.56,7.98z M5.31,13H5.29 c-0.65,0-1.15,0.62-0.96,1.25c0.16,0.54,0.38,1.07,0.66,1.58c0.31,0.57,1.11,0.66,1.57,0.2l0,0c0.3-0.31,0.38-0.77,0.17-1.15 c-0.2-0.37-0.36-0.76-0.48-1.16C6.13,13.28,5.74,13,5.31,13z M8.16,19.02c0.51,0.28,1.04,0.5,1.59,0.66 c0.62,0.18,1.24-0.32,1.24-0.96v-0.03c0-0.43-0.28-0.82-0.7-0.94c-0.4-0.12-0.78-0.28-1.15-0.48c-0.38-0.21-0.86-0.14-1.16,0.17 l-0.03,0.03C7.5,17.92,7.59,18.71,8.16,19.02z M13,4.07V3.41c0-0.89-1.08-1.34-1.71-0.71L9.17,4.83C8.77,5.23,8.77,5.87,9.17,6.26 l2.13,2.08C11.93,8.96,13,8.51,13,7.62V6.09c2.84,0.48,5,2.94,5,5.91c0,2.73-1.82,5.02-4.32,5.75C13.27,17.87,13,18.26,13,18.69 v0.02c0,0.65,0.61,1.14,1.23,0.96C17.57,18.71,20,15.64,20,12C20,7.92,16.95,4.56,13,4.07z"/>
</g>
</svg>
</div>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
width: 100%;
box-sizing: border-box;
}
// Main Styles
.main {
width: 100%;
height: 100%;
background: #161616;
display: flex;
justify-content: center;
align-items: center;
&__button {
width: 4rem;
height: 4rem;
border-radius: 2rem;
background: slateblue;
position: relative;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
box-shadow: 0px 8px 8px rgba($color:#000, $alpha:0.9);
transition: .3s ease-in-out;
svg {
fill: #161616;
vertical-align: middle;
}
&:hover {
box-shadow: 0px 8px 48px rgba($color:#000, $alpha:0.9);
background: #161616;
border: 1px solid slateblue;
svg {
fill: slateblue;
animation: bounce 1s cubic-bezier(.68,.12,0,.99) forwards 1;
@keyframes bounce {
0%, 100% {
transform: rotate(0deg);
}
50% {
transform: rotate(45deg);
}
}
}
&::after {
opacity: 1;
}
}
&::after {
content: attr(data-tool);
font-family: 'Space Mono', monospace;
opacity: 0;
position: absolute;
color: #fff;
background: #161616;
white-space: pre;
bottom: 5rem;
padding: .5rem 1rem;
border-radius: 2rem;
left: -100%;
pointer-events: none;
transition: .3s ease-in-out;
box-shadow: 0px 2px 8px rgba($color:#000, $alpha:0.3);
}
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.