先看看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>
素材背景:
更多问题,可以在本贴留言!
隐藏内容需要付费才可以看见
马上购买
耳东人圭
每个人的心里,都有一个忘不记,却无法拥抱珍惜的人。
我想拥有温柔,不仅仅止于表面的伪装。
You complete me !
生气归生气,又不是不爱你……
你指尖跃动的电光,是我此生不变的信仰,唯我超电磁炮永世长存。