標籤：text 按鈕 set border hit tran near html ack
按鈕填充效果<!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）——按鈕填充效果
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
