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

**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:

Click image for larger version.

Name: button1.jpg
Views: 116
Size: 9.9 KB
ID: 6298

Click image for larger version.

Name: button2.jpg
Views: 122
Size: 11.8 KB
ID: 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...

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

**gib65** · 06-13-2018, 01:33 AM

Originally Posted by coothead

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,

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