使用CSS+PS制作圆角Button按钮并且可以自适应文字! 【附完整代码】

极客小俊

于 2024-01-18 13:37:57 发布

阅读量440

点赞数 9

分类专栏： HTML+CSS 文章标签： html css 网页布局前端开发基础入门学习学习笔记实战应用开发

本文链接：https://blog.csdn.net/windowsxp2018/article/details/135672134

版权

HTML+CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

🚀 个人主页 极客小俊
✍🏻 作者简介：web开发者、设计师、技术分享博主
🐋 希望大家多多支持一下, 我们一起学习和进步！😄
🏅 如果文章对你有帮助的话，欢迎评论 💬点赞👍🏻 收藏 📂加关注

效果

我们先来看看效果吧!

如图

布局技巧

之前我们也做过滑动门导航条菜单, 其实跟那个也差不多，都是利用了html的层次结构来进行布局，进而实现这种效果!

关键布局的结构如下:

<a href="javascript:;" title="#" class="btn">文字
    <span class="left"></span>
    <span class="right"></span>
</a>

思路分析

我们把按钮背景图分为左、中、右这三块，然后利用html层次结构把他们拼凑起来!

最后实现圆角按钮的效果,这种布局方式的好处就是可以达到文字的自适应,利用css背景定位显示

我也可以把左右圆角设置到两个span标签上,这两侧中间的背景则设置到a标签上,这样叠加显示呈现出圆角效果,同样的我们也可以利用PS切片来修改我们的素材,最后结合html层次关系结构来达到我们想要的效果也是可以的!

素材图准备

在布局之前，我们要准备好图片素材,根据我们这里的情况，先把图片素材通过PS切片给切出来!

如图

注意:不要切太大，几个像素就足够了!

最后把按钮的素材图片准备好，如下图:

代码编写

html

<div id="content">
    <a href="javascript:;" title="#" class="btn">Home
        <span class="left"></span>
        <span class="right"></span>
    </a>

    <a href="javascript:;" title="#" class="btn">Web Dev
        <span class="left"></span>
        <span class="right"></span>
    </a>

    <a href="javascript:;" title="#" class="btn">Map
        <span class="left"></span>
        <span class="right"></span>
    </a>

    <a href="javascript:;" title="#" class="btn">Apple Mac
        <span class="left"></span>
        <span class="right"></span>
    </a>

    <a href="javascript:;" title="#" class="btn">Apple iPhone
        <span class="left"></span>
        <span class="right"></span>
    </a>
</div>

css

#content{
    width: 1000px;
    margin: 100px auto;
    border-bottom: 1px solid black;
    padding: 10px;
    overflow: hidden;
}

.btn{
    height: 34px;
    line-height: 34px;
    text-decoration: none;
    color: #666666;
    float: left;
    background: url("img/center.jpg");
    margin: 0px 10px;
}

.btn>.left{
    height: 34px;
    float: left;
    padding-left: 15px;
    background: url("img/btn1-left.jpg") no-repeat;
    /*background-color: red;*/
}

.btn>.right{
    height: 34px;
    float: right;
    padding-right: 15px;
    background: url("img/btn1-right.jpg") no-repeat;
    /*background-color: blue;*/
}


.btn:hover{
    color: white;
    background: url("img/center-2.jpg");
}

.btn:hover>.left{
    background: url("img/btn2-left.jpg") no-repeat;
}

.btn:hover>.right{
    background: url("img/btn2-right.jpg") no-repeat;
}