Printable View
Hello,
Is there any way to make a div look like a button with shaded/highlighted borders?
Something like this:
Attachment 6298
Attachment 6299
I'm not so much interested in the color or the rounded borders, but the shading on the bottom/right edges and the highlighting on the top/left edges; the effect that gives it the 3D/pop-out effect.
Thanks.
I suggest playing with this until your liking: http://css3buttongenerator.com/
Hi there gib65,
here is an example for you to try...
Code:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>imitation buttons</title>
<link rel="stylesheet" href="screen.css" media="screen">
<style media="screen">
body {
background-color: #f9f9f9;
font: 100% / 162% verdana, arial, helvetica, sans-serif;
}
div[tabindex] {
max-width: 8em;
line-height: 3em;
margin: 0.3em 0;
border: 0.2em solid;
border-color: #efb2b2 #710000 #710000 #efb2b2;
outline: 0;
border-radius: 0.4em;
background-image: linear-gradient( to bottom, #ff0f4e, #9f0d4e );
box-sizing: border-box;
box-shadow: 0.2em 0.2em 0.2em rgba( 0, 0, 0, 0.3 );
color: #fff;
font-weight: bold;
text-align: center;
text-shadow: 0 0 0.2em #581332;
text-transform: uppercase;
cursor: pointer;
}
div[tabindex]:focus {
padding: 0 0 0 0.2em;
box-shadow: inset 0.3em 0.3em 0.3em rgba( 0, 0, 0, 0.2 ),
0.2em 0.2em 0.2em rgba( 0, 0, 0, 0.3 );
text-shadow: 0.2em 0.2em 0.2em #360110;
}
</style>
</head>
<div tabindex="1">anchor</div>
<div tabindex="2">button</div>
<div tabindex="3">input</div>
</body>
</html>
coothead
Thanks coothead,Quote:
Originally Posted by coothead
border-color with the four values is just what I need.
No problem, you're very welcome. ;)
coothead