利用CSS实现按钮hover时文本左移效果

最新推荐文章于 2024-05-31 21:55:05 发布

sunly_

最新推荐文章于 2024-05-31 21:55:05 发布

阅读量480

点赞数

分类专栏： css 文章标签： css js html css3 less

本文链接：https://blog.csdn.net/qq_40745143/article/details/121138436

版权

css 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

<template>
	<view class="login">
		<button class="button"><span>Hover</span></button>
	</view>
</template>
<script>
	export default {
		components: {},
		data() {
			return {}
		},
		onLoad() {},
		methods: {

		},
	}
</script>
<style scoped lang="scss">
	.button {
		width: 200px;
		height: 50px;
		line-height: 50px;
		border-radius: 5px;
		background: #f4511e;
		color: #fff;
		border: 0;
		outline: none;
		display: inline-block;
		position: relative;
		transition: .5s;
		font-size: 18px;
	}

	.button span {
		cursor: pointer;
		position: relative;
		transition: .5s;
	}

	.button span:after {
		content: ">>";
		position: absolute;
		opacity: 0;
		right: -20px;
		transition: .5s;
	}

	.button:hover span {
		padding-right: 30px;
	}

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