html - 如何设计一个重叠的按钮?

标签 html css responsive google-web-designer

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

/image/7OxFO.png

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

我得到的看起来像这样 [这是我制作的图像] /image/ruxL5.png

最佳答案

请参阅此示例。回家,你得到你想要的。 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>

关于html - 如何设计一个重叠的按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44567714/

相关文章:

html - 对齐表单元素 bootstrap 3

html - 如何用css只格式化一个表格

css - 将固定表格转换为响应式移动表格

html - 如何在父 div 中定位文本 block ?

javascript - 如何正确地将UTF-8字符视为SVG参数?

javascript - 使用 jquery 调整元素大小打破 100% 高度

html - 过渡宽度时右侧出现间隙

App 仅支持移动设备纵向模式时的 Flutter 响应式设计(不支持 Web、平板电脑、桌面)

javascript - jquery点击事件不触发

html - 如何在单击 Angular 7 中的按钮时从右到左制作 div 的慢速动画