如何制作一个好看的广告banner？（纯代码实现）

先看看demo视频效果：

上图中的效果如何实现呢？

分解动作：主要通过DIV+CSS实现，其中可以自有进行A标签设置，输出到任意地方均可。

代码分享如下：

<div class="recruit">
    <div class="recruit-title"> MarTecher推荐官招募令</div>
    <div class="btn-recruit">
      <a class="btn2 btn-effect" href="javascript:void(0);" onclick="jinsom_open_user_chat(14,this);">我要推荐</a>
    </div>
  </div>

<style>
  .recruit {
    text-align: center;
    height: 100px;
    line-height: 40px;
    margin-bottom: 20px;
    width: 100%;
    background: url(/wp-content/uploads/2021/09/banner_recruit.jpg) no-repeat ;
    background-size: cover; 
    border-radius: 5px;

}
   .recruit-title {
    display: inline-block;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 700;
    color: #fff;
    font-size: 30px;
    margin: 7px;
}
  .btn-recruit {margin-top:0px;}
  .btn-recruit a {
    border-radius: 32px;
    padding: 3px 10px;
    color: #f9c44d;
    border: 2px solid #ffd576;
    font-size: 15px;
    background: #fffbf1;
}
</style>

素材背景：

更多问题，可以在本贴留言！