欢迎来到361模板(www.ke361.com),原创精品织梦模板提供商。QQ快速注册登录 网站托管 VIP 网站定制

361模板网

当前位置:361模板网 > 技术文档 > 程序代码 > css将超链接a设计成按钮样式实例
这篇文章主要为大家详细介绍了css将超链接a设计成按钮样式实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。

刚接到一个用户的要求,想把button样式用超链接a写出来,如下图:

css将超链接a设计成按钮样式实例

上面的登陆按钮是button代码,实现代码如下:

1、button的CSS代码

.btn-submit{width:100%;border:none;outline:none;height:3.07rem;margin-top:3.7rem;font-size:1.78rem;letter-spacing:1rem;background-color:#7f6173;color:#fff;}

2、HTML代码

<button class="btn-submit" type="submit" data-form-sbm="1483930096400.321">登录</button>

下面的注册按钮是需要使用a标签的样式来实现,具体代码如下:

CSS样式代码:

.btn-submit{width:100%;border:none;outline:none;height:3.07rem;margin-top:3.7rem;font-size:1.78rem;letter-spacing:1rem;background-color:#7f6173;color:#fff;}
a{font-size:1.78rem;display:block;text-decoration: none;color:#fffbackground:#c00;border-radius:3px;text-align:center;
line-height:3.07rem;}

HTML代码:

<a style="margin-top:10px;" class="btn-submit" href="http://www.ke361.com/web_user/index_do.php?fmdo=user&dopost=regnew" target="_blank">注册</a>

这样,最终的实现效果样式就是开始的图片效果。

以上就是css将超链接a设计成按钮样式实例的全部内容。

以上就是css将超链接a设计成按钮样式实例的全部内容,希望对大家的学习和解决疑问有所帮助,也希望大家多多支持361模板网。

感谢打赏,我们会为大家提供更多优质资源!

热词标签: css 按钮样式 button 超链接

上一篇css控制table文字溢出 css控制td显示字数

下一篇php生成随机唯一优惠码/邀请码/ 固定长度

取消

感谢您的支持,我们会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

Powered by361模板网,分享从这里开始,精彩与您同在