Sep 25, 2022

Creative Icon Menu

CSS 592 views
<br>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Icon Menu</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #292929;
        }

        section {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100vh;
        }

        nav {
            display: flex;
            align-items: center;
            background-color: #fff;
            gap: 20px;
            padding: 10px 20px;
            border-radius: 20px;
        }

        nav a {
            display: flex;
            padding: 10px;
            position: relative;
        }

        nav a::before {
            position: absolute;
            content: '';
            border-radius: 100%;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            z-index: 0;
            background-color: #00b7ff;
            transform: scale(0);
            transition: 0.3s all cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        nav a:hover::before {
            transform: scale(1);
        }

        nav a svg {
            width: 30px;
            height: 30px;
            position: relative;
        }

        nav a svg path {
            fill: #292929;
            transition: 0.3s all ease-in-out;
        }

        nav a:hover svg path {
            fill: #fff;
        }
    </style>
</head>
<body>
    <section>
        <nav>
            <a href="">
                <svg data-name="Layer 2" id="Layer_2" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path class="cls-1" d="M30,15a1,1,0,0,1-.58-.19L16,5.23,2.58,14.81a1,1,0,0,1-1.16-1.62l14-10a1,1,0,0,1,1.16,0l14,10A1,1,0,0,1,30,15Z"/><path class="cls-1" d="M5,9A1,1,0,0,1,4,8V4A1,1,0,0,1,5,3H9A1,1,0,0,1,9,5H6V8A1,1,0,0,1,5,9Z"/><path class="cls-1" d="M25,29H20a1,1,0,0,1-1-1V21H13v7a1,1,0,0,1-1,1H7a3,3,0,0,1-3-3V16a1,1,0,0,1,2,0V26a1,1,0,0,0,1,1h4V20a1,1,0,0,1,1-1h8a1,1,0,0,1,1,1v7h4a1,1,0,0,0,1-1V16a1,1,0,0,1,2,0V26A3,3,0,0,1,25,29Z"/></svg>
            </a>
            <a href="" class="active">
                <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Iconly/Light-Outline/2-User" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="2-User" transform="translate(2.000000, 2.000000)" fill="#000000"><path d="M7.5918,11.957 C10.8508,11.957 15.1838,12.324 15.1838,15.499 C15.1838,18.84352 10.1349096,19.0441912 7.969206,19.0562315 L7.1829025,19.0562358 C4.8737376,19.0442632 -0.0002,18.84472 -0.0002,15.519 C-0.0002,12.17072 5.0486904,11.9698232 7.214394,11.9577694 L7.4745932,11.9570285 C7.5151456,11.957 7.55424,11.957 7.5918,11.957 Z M7.5918,13.457 C4.8128,13.457 1.4998,13.814 1.4998,15.519 C1.4998,16.871 3.5498,17.557 7.5918,17.557 C11.6338,17.557 13.6838,16.864 13.6838,15.499 C13.6838,14.144 11.6338,13.457 7.5918,13.457 Z M16.7065,11.4899 C19.4125,11.8949 19.9795,13.1479 19.9795,14.1269 C19.9795,14.8559 19.6645,15.8429 18.1615,16.4119 C18.0745,16.4449 17.9845,16.4609 17.8955,16.4609 C17.5925,16.4609 17.3075,16.2759 17.1945,15.9769 C17.0475,15.5899 17.2425,15.1559 17.6295,15.0099 C18.4795,14.6879 18.4795,14.2949 18.4795,14.1269 C18.4795,13.5599 17.8085,13.1719 16.4855,12.9749 C16.0755,12.9129 15.7925,12.5309 15.8535,12.1219 C15.9155,11.7119 16.3045,11.4369 16.7065,11.4899 Z M7.5918,-1.77635684e-14 C10.4228,-1.77635684e-14 12.7268505,2.304 12.7268505,5.135 C12.7328,6.499 12.2038,7.787 11.2398,8.757 C10.2778,9.728 8.9928,10.265 7.6258,10.27 L7.5918,10.27 C4.7598,10.27 2.4558,7.966 2.4558,5.135 C2.4558,2.304 4.7598,-1.77635684e-14 7.5918,-1.77635684e-14 Z M14.6794,1.1238 C16.6444,1.4458 18.0704,3.1268 18.0704,5.1198 C18.0664,7.1248 16.5694,8.8468 14.5874,9.1248 C14.5524,9.1298 14.5174,9.1318 14.4824,9.1318 C14.1144,9.1318 13.7934,8.8608 13.7404,8.4858 C13.6834,8.0758 13.9684,7.6958 14.3784,7.6388 C15.6264,7.4638 16.5684,6.3808 16.5704,5.1188 C16.5704,3.8648 15.6724,2.8068 14.4374,2.6048 C14.0284,2.5368 13.7514,2.1518 13.8184,1.7428 C13.8854,1.3338 14.2724,1.0588 14.6794,1.1238 Z M7.5918,1.5 C5.5868,1.5 3.9558,3.131 3.9558,5.135 C3.9558,7.139 5.5868,8.77 7.5918,8.77 L7.6228,8.77 C8.5868,8.766 9.4948,8.387 10.1758,7.7 C10.8578,7.015 11.2308,6.104 11.2268318,5.138 C11.2268318,3.131 9.5958,1.5 7.5918,1.5 Z" id="Combined-Shape"></path></g></g></svg>
            </a>
            <a href="">
                <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><title/><g data-name="1" id="_1"><path d="M348.73,450.06a198.63,198.63,0,0,1-46.4-5.85c-52.43-12.65-106.42-44.74-152-90.36s-77.71-99.62-90.36-152C46.65,146.75,56.15,99.61,86.69,69.07l8.72-8.72a42.2,42.2,0,0,1,59.62,0l50.11,50.1a42.18,42.18,0,0,1,0,59.62l-29.6,29.59c14.19,24.9,33.49,49.82,56.3,72.63s47.75,42.12,72.64,56.31L334.07,299a42.15,42.15,0,0,1,59.62,0l50.1,50.1a42.16,42.16,0,0,1,0,59.61l-8.73,8.72C413.53,439,383.73,450.06,348.73,450.06ZM125.22,78a12,12,0,0,0-8.59,3.56l-8.73,8.72c-22.87,22.87-29.55,60-18.81,104.49,11.37,47.13,40.64,96.1,82.41,137.86s90.73,71,137.87,82.41c44.5,10.74,81.61,4.06,104.48-18.81l8.72-8.72a12.16,12.16,0,0,0,0-17.19l-50.09-50.1a12.16,12.16,0,0,0-17.19,0l-37.51,37.51a15,15,0,0,1-17.5,2.72c-30.75-15.9-61.75-39.05-89.65-66.95s-51-58.88-66.94-89.63a15,15,0,0,1,2.71-17.5l37.52-37.51a12.16,12.16,0,0,0,0-17.19l-50.1-50.11A12.07,12.07,0,0,0,125.22,78Z"/><path d="M364.75,269.73a15,15,0,0,1-15-15,99.37,99.37,0,0,0-99.25-99.26,15,15,0,0,1,0-30c71.27,0,129.25,58,129.25,129.26A15,15,0,0,1,364.75,269.73Z"/><path d="M428.15,269.73a15,15,0,0,1-15-15c0-89.69-73-162.66-162.65-162.66a15,15,0,0,1,0-30c106.23,0,192.65,86.43,192.65,192.66A15,15,0,0,1,428.15,269.73Z"/></g></svg>
            </a>
        </nav>
    </section>
</body>
</html>
                                Copy Code
Result Screenshot(s)

Author: Geekboots