Pure CSS 3D button

    In the below example we are creating a 3D button only using CSS without any javascript or jQuery statements.

The CSS are shown below

#demo-7 {
    text-align:center;
}
#demo-7 button {
    border:0;
    border-radius:60px;
    background:#F00;
    box-shadow:0 5px 0 #000;
    color:#FFF;
    cursor:pointer;
    font-variant:small-caps;
    font-weight:bold;
    height:60px;
    padding:0;
    text-shadow:0 1px 0 #EEE;
    -webkit-transition:all .1s linear;
    -moz-transition:all .1s linear;
    -o-transition:all .1s linear;
    transition:all .1s linear;
    width:60px;
}
#demo-7 button:active {
    box-shadow:0 2px 0 #666;
    -webkit-transform:translateY(3px);
    -moz-transform:translateY(3px);
    -o-transform:translateY(3px);
    transform:translateY(3px);
}
.credits {
    font-size:18px;
    position:absolute;
    bottom:15px;
    text-align:center;
    width:99%;
}
.credits a {
    color:#D1001C;
}

Remove blue border from css custom-styled button

When the button is active, you can see the blue border around the button like below image.
    If you want to remove this border you should need to put the below method

button {outline:0;}

Example Program:- (Editor)

Output:-

Advertisement