按钮填充效果
<!DOCTYPE html><html lang="en"><head> ?<meta charset="UTF-8"> ?<meta name="viewport" content="width=device-width, initial-scale=1.0"> ?<meta http-equiv="X-UA-Compatible" content="ie=edge"> ?<title>Document</title> ?<style> ???.btn { ?????position: relative; ?????width: 100px; ?????margin: 50px auto; ?????text-align: center; ?????padding: 0 2rem; ?????font-family: ‘Arial‘, sans-serif; ?????font-size: 36px; ?????line-height: 4.5rem; ?????color: deeppink; ?????background-color: transparent; ?????border: 3px solid deeppink; ?????cursor: pointer; ???} ???.btn:after { ?????content: ‘‘; ?????position: absolute; ?????z-index: -1; ?????top: 0; ?????left: 50%; ?????height: 100%; ?????width: 0; ?????background-color: deeppink; ?????transition: width .5s, left .5s; ???} ???.btn:hover { ?????color: white; ???} ???.btn:hover:after { ?????top: 0; ?????left: 0; ?????width: 100%; ?????transition: width .5s, left .5s; ???} ???.btn { ?????background-color: deeppink; ?????background-image: linear-gradient(white, white); ?????background-repeat: no-repeat; ?????background-size: 0% 100%; ?????background-position: center; ?????-webkit-background-clip: text; ?????-webkit-text-fill-color: transparent; ?????transition: background-size .5s; ???} ???.btn:hover { ?????background-size: 100% 100%; ???} ?</style></head><body> ?<div class="btn"> Btn </div></body></html>CSS特效（11）——按钮填充效果
原文地址：https://www.cnblogs.com/janas-luo/p/9604893.html