<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.