Very 3D buttons

HTML & CSS
1

Hi there,

I am wanting to create something like this in CSS and wondered if it is possible?

image

Also, does anyone know what these kind of buttons are called? I’ve tried searching for “raised buttons”, “extruded buttons”, but can’t seem to find them anywhere. I guess there must be a name for this type of button?

Any suggestions?

Thanks!

2

looks more like an open container to me, rather than a button. It’s missing a line in the top right to indicate a closed third dimensionality.

image
image600×600 40.1 KB

3

Thanks for the reply.

I guess it does look like that. I was thinking of creating a button wit a style like that, so the top line would join to become a button.

4

CSS can do a lot… i’m not sure how much code would be required to create it, though. A SVG would probably be easier/better.

5

Yes, maybe use it as a background-image, then padding to shift the text to the lower left.

6

You can do it like this with magic numbers and just one element.

I haven’t been too careful as that’s just a prove of concept. :slight_smile: It would take a bit of work to be responsive but that was just my first idea.

For a perfect box you could use perspective much like this 10 year old dice demo of mine.

4 Likes
7

This one is a bit more responsive but need an extra element.

As the others have said if you are good at drawing svgs then they might be easier to manage. (Bear in mind it only took me about a minute for each of those demos :slight_smile: )

8

With artistic licence . . .

2 Likes
9

Very nice :slight_smile:

10

This is my effort with responsive size.
For ease I went to solid shading, feel free to add stripey gradients if you will.
Also it’s a solid, not hollow box.

The set-up seems a bit magic numberish, but it seems to hold up.

1 Like
11

Here is an SVG example…

HTML

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>SVG example</title>

<link rel="stylesheet" href="screen.css" media="screen">

</head>
<body>

 <h1>SVG example</h1>

 <a href="https://www.example.com">
  <svg 
   xmlns="http://www.w3.org/2000/svg" 
   viewbox="0 0 130 90"
  >
   <path d="M10,30 L40,10 L40,80 L10,80 L10,30" fill="#999" stroke="#000" stroke-width="0.1%"/>
   <path d="M10,80 L10,60 L120,60 L90,80 L10,80" fill="#eee" stroke="#000" stroke-width="0.1%"/>

   <rect x="40" y="10" width="80" height="50" fill="#fff" stroke="#000" stroke-width="0.1%"/>

   <image href="https://i.postimg.cc/kXSPSLvQ/linear-image.jpg" width="80" height="50" x="40" y="10"/>

   <rect x="10" y="30" width="80" height="50" fill="#fff" stroke="#000" stroke-width="0.1%"/>

   <text x="29" y="60">ARCH</text>
  </svg>
 </a>
</body>
</html>

screen.css

h1 {
   font-size: 1.25em;
   font-weight: normal;
   color: #555;
   text-align: center;
}
a {
   display: block;
   max-width: 36em;/* adjust to suit */
   border: 1px solid #000;
 }

Example

Full Page View

1 Like
12

Use this amended svg…

  <svg 
   xmlns="http://www.w3.org/2000/svg" 
   viewbox="0 0 130 90"
  >
   <path d="M10,30 L40,10 L40,80 L10,80 L10,30" fill="#eee" stroke="#000" stroke-width="0.1%"/>

   <rect x="40" y="10" width="80" height="50" fill="#fff" stroke="#000" stroke-width="0.1%"/>

   <image href="https://i.postimg.cc/kXSPSLvQ/linear-image.jpg" width="80" height="50" x="40" y="10"/>
   <path d="M90,30 L120,10 L120,60 L90,80 L90,30" fill="#eee" stroke="#000" stroke-width="0.1%"/>
   <rect x="10" y="30" width="80" height="50" fill="#fff" stroke="#000" stroke-width="0.1%"/>

   <text x="29" y="60">ARCH</text>
  </svg>

Result

Full Page View

1 Like
13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.