In the below example we are creating a 3D button only using CSS without any javascript or jQuery statements.
The CSS are shown below
If you want to remove this border you should need to put the below method
Example Program:- (Editor)
Output:-
Advertisement
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;
}
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
0 comments:
Post a Comment