jak uzyskać taki efekt?

Question

Chciałbym uzyskać taki efekt jak jest na tej stronie http://hotlab.pl/, dokładnie chodzi to ten przyciśck 

 

 

Dzięki za pomoć 

Answer 1

<a href="#">Efekt button</a>

a {
        text-align: center;
        cursor: pointer;
        zoom: 1;
        position: relative;
        overflow: hidden;
        color: #000;
        font-weight: 700;
        font-size: 12px;
        z-index: 1 -webkit-transform : translateZ(0);
        -webkit-transition: color .2s ease-in-out, background .2s ease-in-out, border .2s ease-in-out;
        -moz-transition: color .2s ease-in-out, background .2s ease-in-out, border .2s ease-in-out;
        -ms-transition: color .2s ease-in-out, background .2s ease-in-out, border .2s ease-in-out;
        -o-transition: color .2s ease-in-out, background .2s ease-in-out, border .2s ease-in-out;
        transition: color .2s ease-in-out, background .2s ease-in-out, border .2s ease-in-out;
        border: 1px solid #000;
        padding: 20px;;
    }

a:before {
    width: 0;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    content: '';
    transition: width .25s ease-out;
    background-color: #000;
}

 a:hover:before {
        width: 100%;
    }

a:hover {
        color: #ffffff;
    }

 

Tak o to powinieneś taki efekt uzyskać o jaki Ci chodziło :)

Comments

Dzięki wielkie :)

---

Nie lepiej zrobić to jako <button> ? 

Answer 2

Najlepiej to stwórz diva którry będzie miał np. id="przycisk" daj mu taki kod css'a

#przycisk

{

border-top: solid 3px;

border-right: solid 3px;

border-left: solid 3px;

border-bottom: solid 3px;

padding: 45px;

letter-spacing: 2px;

font-size: 24px;

}

 

Pozdrawiam!

PS.  ... i oczywiście zrób w środku tego diva hiperłącze :{ )

Comments

ale jemu nie chodzi o prostokąt  tylko ten efekt co jest w prostokącie