Html 如何重新设计两个按钮

我需要帮助重新设计关闭和信息按钮

这是该按钮现在的外观：

横幅上的按钮应如下所示：

按钮的CSS代码：

 body {
        margin: 100px;
    }

    .banner-buttons {
        position: relative;
        font-size: 13px;
        width: 120px;
        background-color: white;
    }

    .adsByNano {
        display: block;
        float: right;
        margin-right: 50%;
        color: #d075f4;
    }

    a.infoLink:hover .adsByNano {
        display: inline-block;
        color: #d075f4;
    }

    .closeBtn {
        display: inline-block;
    }

    .closeBtn:hover {
        cursor: pointer;
        color: #d075f4;
    }

 <div id="main">
    <div class="nanoSaturnBanner">
        <div class="banner-buttons">
            <label class="adsByNano">Ads by Nano</label>
            <a class="infoLink" href="http://nanointeractive.com/privacy" target="_blank">
                <i class="fas fa-info-circle"></i>
            </a>
            <div class="closeBtn" onclick="removeHeader()">
                <i class="far fa-window-close"></i>
            </div>
        </div>
    </div>

按钮的HTML代码：

 body {
        margin: 100px;
    }

    .banner-buttons {
        position: relative;
        font-size: 13px;
        width: 120px;
        background-color: white;
    }

    .adsByNano {
        display: block;
        float: right;
        margin-right: 50%;
        color: #d075f4;
    }

    a.infoLink:hover .adsByNano {
        display: inline-block;
        color: #d075f4;
    }

    .closeBtn {
        display: inline-block;
    }

    .closeBtn:hover {
        cursor: pointer;
        color: #d075f4;
    }

 <div id="main">
    <div class="nanoSaturnBanner">
        <div class="banner-buttons">
            <label class="adsByNano">Ads by Nano</label>
            <a class="infoLink" href="http://nanointeractive.com/privacy" target="_blank">
                <i class="fas fa-info-circle"></i>
            </a>
            <div class="closeBtn" onclick="removeHeader()">
                <i class="far fa-window-close"></i>
            </div>
        </div>
    </div>

纳米广告

对解决方案有什么想法吗？

在这里

正文{
利润率：20px；
}
.nanostaturnbanner{text align:right；}
.横幅按钮{
位置：相对位置；
字体大小：13px；
显示：内联块；
背景色：白色；
}
.banner按钮：hover.adsbynona{
显示：内联块；
}
阿德斯比纳诺先生{
显示：无；
垂直对齐：中间对齐；
颜色：#d075f4；
}
a、 infoLink:hover.adsbynona{
显示：内联块；
垂直对齐：中间对齐；
颜色：#d075f4；
}
.关闭{
显示：内联块；
}
.closeBtn:悬停{
光标：指针；
颜色：#d075f4；
}

纳米广告

在这里

正文{
利润率：20px；
}
.nanostaturnbanner{text align:right；}
.横幅按钮{
位置：相对位置；
字体大小：13px；
显示：内联块；
背景色：白色；
}
.banner按钮：hover.adsbynona{
显示：内联块；
}
阿德斯比纳诺先生{
显示：无；
垂直对齐：中间对齐；
颜色：#d075f4；
}
a、 infoLink:hover.adsbynona{
显示：内联块；
垂直对齐：中间对齐；
颜色：#d075f4；
}
.关闭{
显示：内联块；
}
.closeBtn:悬停{
光标：指针；
颜色：#d075f4；
}

纳米广告

试试这个

正文{
利润率：100像素；
}
.纳米退火炉{
边框：1px实心#ccc；
背景色：#EDEBED；
填充：10px；
位置：相对位置；
}
.横幅按钮{
位置：绝对位置；
字体大小：13px；
背景色：白色；
右：0；
顶部：-10px；
显示器：flex；
柔性包装：包装；
填充物：2个3个；
边界半径：4px；
}
.横幅按钮.关闭按钮，
.条幅按钮.信息链接{
左边距：5px；
颜色：#77CDE0；
字体大小：12px；
}
.横幅按钮.关闭按钮：悬停{
颜色：#77CDE0；
}
阿德斯比纳诺先生{
显示：块；
浮动：对；
颜色：黑色；
}
a、 infoLink:hover.adsbynona{
显示：内联块；
颜色：#d075f4；
}
.关闭{
显示：内联块；
}
.closeBtn:悬停{
光标：指针；
颜色：#d075f4；
}

纳米广告
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本。

试试这个

正文{
利润率：100像素；
}
.纳米退火炉{
边框：1px实心#ccc；
背景色：#EDEBED；
填充：10px；
位置：相对位置；
}
.横幅按钮{
位置：绝对位置；
字体大小：13px；
背景色：白色；
右：0；
顶部：-10px；
显示器：flex；
柔性包装：包装；
填充物：2个3个；
边界半径：4px；
}
.横幅按钮.关闭按钮，
.条幅按钮.信息链接{
左边距：5px；
颜色：#77CDE0；
字体大小：12px；
}
.横幅按钮.关闭按钮：悬停{
颜色：#77CDE0；
}
阿德斯比纳诺先生{
显示：块；
浮动：对；
颜色：黑色；
}
a、 infoLink:hover.adsbynona{
显示：内联块；
颜色：#d075f4；
}
.关闭{
显示：内联块；
}
.closeBtn:悬停{
光标：指针；
颜色：#d075f4；
}

纳米广告
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本。

您可以附加一个JSFIDLE示例，以便再现按钮或位置的视觉效果？@MateuszJ placement您是指该按钮应放置在何处的横幅？-那个代码乱七八糟，这就是为什么我不想分享那个代码，只想分享按钮。你知道我怎么做同样的按钮设计和位置吗？你可以附上一个JSFIDLE样本，你想复制按钮或位置的视觉效果吗？@MateuszJ placement你是说这个按钮应该放在哪里那个代码乱七八糟，这就是为什么我不想分享那个代码，只想分享按钮。你知道我怎么做同样的设计和按钮的位置吗？谢谢库马尔！你知道我在哪里可以找到更好的图标吗？我只想成为不同的颜色？你也可以在这里使用图标。这也是一个很酷的关于颜色的网站，你可以改变自己的颜色！我想这个标签我想这个标签“广告由纳米”将显示在悬停。问题是，我将class“.adsbynona”更改为dispaly:none，并将其置于链接“a.infoLink:hover.adsbynona{dispaly:inline block；}上，但悬停效果不起作用？您有吗