Skip to content
Advertisements

Only CSS Menu

CODEPEN

Only CSS Menu

Github: https://github.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/tree/master/Only%20Css%20Menu


HTML

<div class="container">
        <div class="link">
          <div class="text">Home</div>
        </div>
        <div class="link">
          <div class="text">Projects</div>
        </div>
        <div class="link">
          <div class="text">Art</div>
        </div>
        <div class="link">
          <div class="text">Social</div>
        </div>
        <div class="link">
          <div class="text">Setup</div>
        </div>
        <div class="link">
          <div class="text">Help</div>
        </div>
    </div>

CSS

html, body{
    padding: 0px;
    margin: 0px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: #fff;
    height: 100%;

    .container{
        max-width: 200px;
        background: #262626;
        margin: 40px auto;
        padding: 10px 0px 20px 0px;
        border: 1px solid #111;
        border-radius: 4px;
        box-shadow: 0px 4px 5px rgba(0,0,0,.75);

        .link{
            font-size: 16px;
            font-weight: bold;
            text-align: center;
            position: relative;
            height: 40px;
            line-height: 40px;
            margin-top: 10px;
            overflow: hidden;
            width: 90%;
            margin-left: 5%;
            cursor: pointer;

            &:after{
                content: "";
                position: absolute;
                width: 40%;
                border-bottom: 1px solid rgba(255,255,255,.5);
                bottom: 50%;
                left: -100%;
                transition-delay: all .5s;
                transition: all .5s;
            }
            &:hover:after,.link.hover:after{
                left:100%;
            }
            .text{
                text-shadow:0px -40px 0px rgba(255, 255, 255, 1);
                transition:all 0.75s;
                transform:translateY(100%);
                transition-delay:all 0.25s;
            }
        }
        .link:hover .text,
        .link.hover .text{
            text-shadow:0px -40px 0px rgba(255, 255, 255, 0);
            transform:translateY(0%) translateZ(0) scale(1.1);
            font-weight:600;
        }
    }


}
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: