先看看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>
素材背景:
更多问题,可以在本贴留言!
隐藏内容需要付费才可以看见
马上购买
耳东人圭
自满必定失败,骄傲必定后悔。
泉涸,鱼相与处于陆,相呴以湿,相濡以沫,不如相忘于江湖。
落花终有意,流水却无情。
有情人终成眷属,没钱人亲眼目睹。
晚来天欲雪,能饮一杯无。
落叶他乡树,寒灯独夜人。
你可以期待太阳从东方升起,而风却随心所欲地从四面八方吹来。
万般世故难欢乐,一程风景作银河。