用CSS制作带图标的按钮

简介: 这是一个搜索按钮,带了一个搜索的小图标。写的CSS在IE6和IE7中的兼容性不是很好。四边的圆角使用了CSS3的属性。

先上一张效果图


image.png


这是一个搜索按钮,带了一个搜索的小图标。写的CSS在IE6和IE7中的兼容性不是很好。四边的圆角使用了CSS3的属性。

 

一、小图标用字体制作


上面的搜索图标,我是通过网站icomoon,在线生成的,这个网站在国外,国内访问比较慢,用代理或FQ工具上去会比较快。网站如下图:


image.png


做好一系列选择后,点击下载,会自动生成字体文件,和CSS的demo


image.png


在自己的文件中引用很方便:

@font-face {
    font-family: 'icomoon';
    src:url('fonts/icomoon.eot?-fl11l');
    src:url('fonts/icomoon.eot?#iefix-fl11l') format('embedded-opentype'),
        url('fonts/icomoon.woff?-fl11l') format('woff'),
        url('fonts/icomoon.ttf?-fl11l') format('truetype'),
        url('fonts/icomoon.svg?-fl11l#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}
.ficomoon{font-family:'icomoon';-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
.icon-search:before {content: "\e601"}


二、按钮框架


为了简单方便点,我用了a标签作为按钮的最外层


<a href="#" class="btn_green">
        <font class="icon_pre ficomoon icon-search"></font>
        <font class="icon_next">筛选</font>
</a>


.btn_green{
    text-decoration:none;
    display:inline-block;
    color:#fff;
    overflow:hidden;
    vertical-align:middle;
    font-size: 1em;
    line-height: 1.4;
}


1、a标签中的line-height是用来撑高度的,如果不加会出现下面的情况:


  image.png


  关于line-height的原理介绍,网上有很多材料可以浏览,有必要的去了解下的。

2、overflow:hidden是用来清除浮动的。


三、按钮内容


根据效果图可以看出,按钮分为左右两部分。

左边部分如下:


<font class="icon_pre ficomoon icon-search"></font>


.icon_pre{
    padding:8px 15px;
    border-right:1px solid #c9e7de;
    background:#69bda4;
    border-radius:4px 0 0 4px;
    float:left
}

border-right显示那条分割线,其余的代码是在显示字体图标。

 

右边部分如下:


<font class="icon_next">筛选</font>


.icon_next{
    padding:8px 30px;
    background:#69bda4;
    border-radius:0 4px 4px 0;
    float:left
}


两部分都用了float浮动,我不太喜欢用这个属性,但不用就会出现中间有很大的间隔。而且由于font是内联元素,所以padding-top和padding-bottom无效。


image.png


用了浮动后就能让font变为块级元素,使得padding有效,而且也会让两个元素紧紧的挨着,不出现间隔。

在网上有很多关于浮动原理的说明,有必要去了解下的。

 

大家如果有更好更简单的方法,请不要吝啬,贴出来分享一下呀。

相关文章
|
1月前
|
前端开发 Ubuntu Linux
CSS 修改鼠标图标样式
CSS 修改鼠标图标样式
40 0
|
3月前
|
前端开发 JavaScript
使用Vue+CSS实现汉堡图标过渡为叉号图标,有点意思
本文分享了如何使用Vue和CSS实现一个汉堡图标在点击时过渡为叉号图标的动画效果,并提供了详细的实现代码和效果演示。
69 0
使用Vue+CSS实现汉堡图标过渡为叉号图标,有点意思
|
3月前
|
前端开发 UED
设计新潮流:CSS动画毛玻璃按钮,展开效果引人入胜!
设计新潮流:CSS动画毛玻璃按钮,展开效果引人入胜!
|
3月前
|
前端开发 搜索推荐 容器
创意按钮,触手可及:CSS不规则形状效果揭秘!
创意按钮,触手可及:CSS不规则形状效果揭秘!
|
3月前
|
前端开发
css来实现一个好玩的按钮
这段代码实现了一个具有独特悬停效果的按钮。通过定义按钮及其`:after`伪元素,并设置初始状态下的透明度和尺寸,当鼠标悬停在按钮上时,背景色平滑过渡至另一种颜色,产生视觉上的动态扩展效果。为避免覆盖文字,特地调整了伪元素的层级,确保交互过程中文字始终可见。整体效果流畅自然,增强了用户界面的互动性与美观度。
56 0
|
4月前
|
前端开发
css特效——纯css绘制图标:带框的加号(添加按钮)、三横(三道杠)、带圈点(双层圆点)
css特效——纯css绘制图标:带框的加号(添加按钮)、三横(三道杠)、带圈点(双层圆点)
125 5
|
4月前
|
前端开发
你不知道的css——4. 基线、中线、x-height、单位ex(含文本与图标对齐技巧)
你不知道的css——4. 基线、中线、x-height、单位ex(含文本与图标对齐技巧)
55 2
|
4月前
|
前端开发
css图标合并——ClipPath Sprites技术
css图标合并——ClipPath Sprites技术
44 1
|
4月前
|
前端开发
css 实用技巧 —— 文字和图标垂直居中对齐(四种方法)
css 实用技巧 —— 文字和图标垂直居中对齐(四种方法)
2280 1
|
4月前
|
前端开发 容器
CSS【详解】对齐 (含文本垂直对齐,文本水平对齐、单行文本垂直居中、多行文本垂直居中、6 种方案块级元素水平垂直居中 、7 种方案图片水平垂直居中、文本自适应对齐、图标和文本对齐,图片和文本对齐等)
CSS【详解】对齐 (含文本垂直对齐,文本水平对齐、单行文本垂直居中、多行文本垂直居中、6 种方案块级元素水平垂直居中 、7 种方案图片水平垂直居中、文本自适应对齐、图标和文本对齐,图片和文本对齐等)
74 0