html - 如何在一个按钮中实现两个功能.CSS BOOTSTRAP

Question

你好谁能帮我实现这个

这是我目前的代码

<button class="btn btn-add btn-block">button</button>

然后我添加自定义 CSS

.btn-add{
    border-radius: 2px;
    cursor: pointer;
    font-size: 14px;
    height: 100px;
    padding: 11px 10px;
    margin-bottom: 10px;
    vertical-align: block;
    width: 250px;

}

用我的代码实现了右上角没有x的按钮

我需要像图片 cos 中那样的按钮:

*当我点击按钮时它会 Bootstrap 我到另一个页面
*当我点击按钮右上角的 x 时，我将删除该按钮。

但我只需要有关如何实现此目的的 css。

任何人都可以帮助我，我的 css 不太全面，在此先感谢。

这是我的 fiddle here

Answer 1

您可以简单地将一个按钮放在另一个按钮上，并相应地设置样式:

Demo Fiddle

HTML

<div>
    <button>button</button>
    <button>x</button>
</div>

CSS

div {
    position:relative;
    display:inline-block;
}
button {
    border:none;
}
button:first-child {
    background:lightgrey;
    border-radius:10px;
    font-size:24px;
    font-family:times;
    padding:30px;
}
button:last-child {
    position:absolute;
    top:0;
    right:2px;
    width:25px;
    background:grey;
    color:white;
    border-radius:10px;
}