Hi! I'm Johannes Dachsel, a web designer and developer based near Heidelberg, Germany. This is my personal website. Get in touch

Johannes Dachsel

100 Buttons 053


button{
    outline: none;
    cursor: pointer;
    display: block;
    text-align: center;
    padding: 1em 2.5em;
    border: 1px solid #a5a5a5;
    border-radius: 60px;
    color: #747474;
    background: -webkit-linear-gradient(#ffffff 0%, #b7b7b7 100%);
    box-shadow: 0 0 3px rgba(0,0,0,.7);
    font-family: sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    line-height: 1;
}

button:before{
    content: "";
    background: -webkit-linear-gradient(rgba(186,186,186,1) 0%, #FFF 100%);
    display: block;
    position: absolute;
    z-index: -1;
    top: -18%;
    left: -5%;
    width: 110%;
    height: 130%;
    border-radius: 60px;
    border: 1px solid #BBB;
    box-shadow: inset 0 2px 2px rgba(0,0,0,.3);
}

button:focus,
button:hover{
    background: -webkit-linear-gradient(#f4f4f4 0%, #b7b7b7 100%);
    box-shadow: 0 0 1px rgba(0,0,0,.3);
    color: #f27f40
}