按钮动画

最新推荐文章于 2025-09-11 21:23:01 发布

转载最新推荐文章于 2025-09-11 21:23:01 发布 · 102 阅读

·

0

·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/fengqiweilan/p/6059354.html

文章标签：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.button {
display: inline-block;
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
width: 200px;

cursor: pointer;
margin: 5px;
}

.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}

.button span:after {
content: '»';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}

.button:hover span {
padding-right:30px; // 这一句实现了， button本来的字和新出现的» 一起动。如果把span 删了，看起来很不同步
}

.button:hover span:after {
opacity: 1;
right: 0;
}
</style>
</head>
<body>

<h2>按钮动画</h2>

<button class="button" style="vertical-align:right"><span>Hover </span></button>

</body>
</html>

http://www.runoob.com/try/try.php?filename=trycss_buttons_animate1

转载于:https://www.cnblogs.com/fengqiweilan/p/6059354.html

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。