3D/pop-out effect to make div look like button [Archive]

gib65

06-07-2018, 04:30 AM

Hello,

Is there any way to make a div look like a button with shaded/highlighted borders?

Something like this:

6298

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.

Deadweight

06-07-2018, 12:03 PM

I suggest playing with this until your liking: http://css3buttongenerator.com/

coothead

06-08-2018, 11:14 AM

Hi there gib65,

here is an example for you to try...

<!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

gib65

06-13-2018, 01:33 AM

Hi there gib65,

here is an example for you to try...

<!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,

border-color with the four values is just what I need.

coothead

06-13-2018, 08:19 AM

No problem, you're very welcome. ;)

coothead