We can Achieve Double Borders HTML Buttons Using CSS Pseudo-classes
That is without using the border-style:double;(As we know these are not easy to control)
Double border means we can have one outer border and one inner border, this can be achieved by using the simple html and applying custom styles.
Here is an example for the same...
<HTML>
<HEAD>
<STYLE>
.spancls
{
border-top: solid 3px #A9B7C6;
border-left: solid 3px #A9B7C6;
border-bottom: solid 3px #657f97;
border-right: solid 3px #657f97;
padding:2px;
background: #EAF5FC;
width:50px;
}
.btncls
{
border:1px solid #EAF5FC;
background:#EAF5FC;
width:50px;
}
.spancls:hover
{
border-top: solid 3px #FFC727;
border-left: solid 3px #FFC727;
border-bottom: solid 3px #D39300;
border-right: solid 3px #D39300;
padding:2px;
background:#FEFAE7;
width:50px;
}
.spancls:active
{
border-top: solid 3px #D39300;
border-left: solid 3px #D39300;
border-bottom: solid 3px #FFC727;
border-right: solid 3px #FFC727;
padding:2px;
background:#FEFAE7;
width:50px;
}
.btncls:hover
{
border:1px solid #FFF1D3 ;
background:#FFF1D3;
width:50px;
}
.btncls:active
{
border:1px solid #FFFFFF ;
background:#FFFFFF;
width:50px;
}
</STYLE>
</HEAD>
<BODY>
<span class="spancls" >
<input type="button" value="hello" class="btncls">
</span>
</BODY>
</HTML>
Here to achieve the double border, we have used a span and added the button inside that span, as we have a 2px padding, it is looking like one more border(internal border) for the button.
And the different states of the button will look like as follows
Plain state of the Button :
Hover(mouse over) state of the Button:
Active(mouse click) state of the Button:
0 Comments:
Post a Comment