css button inner border line
css button inner border line
HTML
<a class='white' href="#">Button</a>
<a class='white' href="#">Button</a>
<a class='white' href="#">Button</a>
CSS
body {
margin: 80px;
background:#ddd;
font-family:arial;
}
a.white {
background: #fff;
display:inline-block;
margin-bottom:12px;
max-width:145px;
text-align:center;
font-size:2.0em;
font-weight:bold;
text-transform:uppercase;
padding:8px;
line-height:38px;
border-radius: 5px;
text-decoration: none;
color: #3e256d;
position: relative;
border: 6px solid #fff;
-webkit-box-shadow: 5px 5px 3px 0px rgba(50, 50, 50, 0.15);
box-shadow:5px 5px 3px 0px rgba(50, 50, 50, 0.15);
-webkit-transition: all 150ms ease;
transition: all 150ms ease;
}
/* a.white:after {
content:'';
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: 5px;
border: 2px solid #3e256d;
} */
/* a.white:active
{
color: #fff;
text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff;
box-shadow: 0 1px 0 #666, 0 2px 0 #444, 0 2px 2px rgba(0,0,0,0.9);
-webkit-transform: translateY(3px);
transform: translateY(3px);
-webkit-animation: none;
animation: none;
}
*/
/* a.white:hover
{
-webkit-animation: pulsate 1.2s linear infinite;
animation: pulsate 1.2s linear infinite;
} */
/* @-webkit-keyframes pulsate
{
0% { color: #ddd; text-shadow: 0 -1px 0 #000;border-radius: 5px; }
50% { color: #3fc333;background:#777777;border-radius: 5px;
text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff; }
100% { color: #ddd; text-shadow: 0 -1px 0 #000;border-radius: 5px; }
}
@keyframes pulsate
{
0% { color: #ddd; text-shadow: 0 -1px 0 #000;border-radius: 5px; }
50% { color: #3fc333;background:#777777;border-radius: 5px; text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff; }
100% { color: #ddd; text-shadow: 0 -1px 0 #000; border-radius: 5px;}
} */
JavaScript
$('a').on( 'click', function( event ) {
return false
});