Scribd Logo
Upload

Welcome to Scribd!

  • Button

    Uploaded by

    Usman Shabbir
    6 views2 pages
    sdf

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    sdf

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    6 views2 pages

    Button

    Uploaded by

    Usman Shabbir
    sdf

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 2

    <html class=""><head><script src="//assets.codepen.

    io/assets/editor/live/console
    _runner-d0a557e5cb67f9cd9bbb9673355c7e8e.js"></script><script src="//assets.code
    pen.io/assets/editor/live/events_runner-21174b4c7273cfddc124acb0876792e0.js"></s
    cript><script src="//assets.codepen.io/assets/editor/live/css_live_reload_init-7
    618a0de08795409d8f6c9ef6805f7b2.js"></script><meta charset="UTF-8"><meta name="r
    obots" content="noindex"><link rel="canonical" href="http://codepen.io/PalashSha
    rma20/pen/YWBAgN">
    <style class="cp-pen-styles">* {
    margin: 0;
    padding: 0;
    }
    body,
    html {
    height: 100%;
    min-height: 100%;
    }
    body {
    font-family: sans-serif;
    }
    .button {
    height: 200px;
    width: 400px;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    display: table;
    cursor: pointer;
    background: #252525;
    transition: 0.333333333333333s all ease-in;
    color: #ff4c4c;
    }
    .button .border {
    background: #ff4c4c;
    position: absolute;
    transition: 1s all linear;
    }
    .button .border.o {
    height: 5px;
    width: 0;
    bottom: 0;
    left: 0;
    transition-delay: 1s;
    }
    .button .border.tw {
    bottom: 0;
    right: 0;
    width: 5px;
    height: 0;
    }
    .button .border.th {
    top: 0;
    right: 0;
    width: 0;
    height: 5px;
    transition-delay: 1s;
    }
    .button .border.f {

    top: 0;
    left: 0;
    width: 5px;
    height: 0;
    }
    .button:hover {
    background: #ff4c4c;
    color: #252525;
    transition-delay: 2s;
    }
    .button:hover .o,
    .button:hover .th {
    width: 100%;
    }
    .button:hover .tw,
    .button:hover .f {
    height: 100%;
    }
    .button span {
    display: table-cell;
    vertical-align: middle;
    font-size: 40px;
    text-align: center;
    letter-spacing: 13px;
    text-transform: uppercase;
    font-weight: 100;
    }
    </style></head><body>
    <div class="button"><span>hover me</span>
    <div class="border o"></div>
    <div class="border tw"></div>
    <div class="border th"></div>
    <div class="border f"></div>
    </div>
    </body></html>

    You might also like