介绍 & lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf-8"祝辞
& lt; title> & lt;/title>
& lt;/head>
& lt; body>
& lt; button>普通方形按钮& lt;/button>
& lt;/body>
& lt;/html> & lt;按钮类=発adomaru"在圆角按钮& lt;/button> 。kadomaru {
宽度:100 px;
字体大小:12 px;
颜色:# FFFFFF;
text-align:中心;
显示:块;
填充:10 px 0 10 px;
背景:# 6 bcbf6;
border - radius: 20 px;
} & lt;按钮类=皊hadow"在立体按钮& lt;/button> 。影子{
宽度:100 px;
字体大小:12 px;
颜色:# FFFFFF;
text-align:中心;
显示:块;
填充:10 px 0 10 px;
背景:# 6 bcbf6;
border - radius: 5 px;
不必:1 px 1 px # 1 a6ea0;
} & lt; div类=癮nimation"比;
& lt; div类=癳ffect"祝辞& lt;/div>
https://www.yisu.com/zixun/& lt; a href=" # ">碰我 。动画{
宽度:100 px;
高度:50 px;
text-align:中心;
边界:2 px固体# BBBBBB;
浮:左;
光标:指针;
位置:相对;
box-sizing: border-box;
溢出:隐藏;
保证金:40 0 0 px 0;
}
.animation一个{
字体类型:arial;
字体大小:12 px;
颜色:# BBBBBB;
文字修饰:没有;
行高:50 px;
过渡:所有.10缓解;
z - index: 2;
位置:相对;
}
.effect {
宽度:140 px;
高度:50 px;
上图:2 px;
左:-140 px;
背景:# BBBBBB;
位置:绝对的;
过渡:0缓解;
z - index: 1;
}
.animation:悬停.effect {
左:0;
}
.animation:悬停{
颜色:# FFFFFF;
}
小编给大家分享一下使用CSS制作按钮的方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
今天的这篇文章中将给大家介绍四种按钮的实现方法,其中包括普通的方形按钮,圆角按钮,立体按钮和带有简单动画的按钮。
我们先来看一下<强>普通方形按钮的实现方法
按钮代码如下所示
HTML代码
<强>圆角按钮的实现方法
代码如下
HTML代码
CSS代码
<>强立体按钮的实现方法
代码如下
HTML代码
CSS代码
使用不必指定阴影大小和阴影颜色,营造立体的感觉。
上述三种方法实现的按钮效果如下
最后一个是带有简单动画的按钮实现,我们来看具体的示例
代码如下
HTML代码
CSS代码
介绍定制的一个例子的话,将.effect的左属性变成右属性,并将。动画:悬停.effect的左属性变更为右属性,可以变成向右的动画。
当执行上述代码时浏览器上显示如下效果:
将鼠标放在按钮上则会有一个向右的动画,显示效果如下
