Results 1 to 5 of 5

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

  1. #1
    Join Date
    Jun 2008
    Posts
    192
    Thanks
    9
    Thanked 0 Times in 0 Posts

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

    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:	49 
Size:	9.9 KB 
ID:	6298

    Click image for larger version. 

Name:	button2.jpg 
Views:	46 
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.

  2. #2
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    509
    Thanks
    9
    Thanked 59 Times in 57 Posts

    Default

    I suggest playing with this until your liking: http://css3buttongenerator.com/
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

  3. #3
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,208
    Thanks
    1
    Thanked 235 Times in 230 Posts

    Default

    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
    ~ the original bald headed old fart ~

  4. The Following User Says Thank You to coothead For This Useful Post:

    gib65 (06-13-2018)

  5. #4
    Join Date
    Jun 2008
    Posts
    192
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by coothead View Post
    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.

  6. #5
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,208
    Thanks
    1
    Thanked 235 Times in 230 Posts

    Default


    No problem, you're very welcome.

    coothead
    ~ the original bald headed old fart ~

Similar Threads

  1. Replies: 3
    Last Post: 05-29-2014, 12:40 AM
  2. Replies: 0
    Last Post: 05-06-2012, 02:49 AM
  3. Replies: 1
    Last Post: 08-11-2009, 11:39 PM
  4. Button element's click effect
    By Keleth in forum CSS
    Replies: 5
    Last Post: 07-11-2009, 08:48 AM
  5. Pls help me to make this javascript cursor effect move clockwise
    By prince0 in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 09-04-2007, 09:04 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •