如何在一个按钮中创建两个功能.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的按钮

我需要像图像中那样有按钮：

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

但我只需要关于如何实现这一点的CSS。

任何人都可以帮助我，事先感谢我在我的CSS上没有得到很好的帮助。

这是我的小提琴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;
}

Answer 2

.closeIcon{
    width: 32px;
    height: 32px;
    background: url('/static/images/close_small.png') no-repeat;
    float: left;
    position: absolute;
    top: -16px;
    right: -16px;
}