如何设计一个重叠的按钮？

Question

[图片有设计][1]图片描述了我想要的设计。我尝试过的是，我将三个按钮放在一起并尝试放置 z-index ，绝对位置，相对位置，但是没用。

https://i.stack.imgur.com/7OxFO.png

我试过的代码是，我同时应用了三个按钮： 123

我得到的是这个样子[这是我制作的图像] https://i.stack.imgur.com/ruxL5.png

Answer 1

看这个例子。回家，你得到你想要的。 http://embed.plnkr.co/ExU03A42KNqr6XakFo4I/

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>

  <style>
    button{
      width:120px;
      height:40px;
      margin:-5px;
      background:#ee5353;
      border:1px solid gray;
      border-radius:3px;
    }
    button:nth-child(2){
      height:60px;
      position:relative;z-index:2;
    }
  </style>
</head>
  <body>
   <button>1</button>
   <button>2</button>
   <button>3</button>

  </body>

</html>

如何设计一个重叠的按钮？

How to design overlapping buttons one over the other?

html

css

responsive

google-web-designer