<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .mybtn{ display: inline-block; padding: 5px 8px; border: .5px solid #e8e8e8; border-radius: 5px; color: #3a3a3a; position: relative; overflow: hidden; } .mybtn::after{ content: ""; position: absolute; width: 100%; height: 100%; bottom: 100%; left: 0; opacity: .8; transition: all .5s ease-out .1s; } .mybtn:before{ content: ""; position: absolute; width: 100%; height: 50%; top: 100%; left: 0; opacity: .8; transition: all .5s ease-out .1s; } .mybtn:hover{ border: .5px solid #e9e9e9; background-color: #e1e1e1; cursor: pointer; } .mybtn:hover::before{ background-color: #4b6eb1; top: 50%; } .mybtn:hover::after{ background-color: #4b6eb1; bottom: 50%; } .mybtn:active{ border: .5px solid #d4d4d4; background-color: #cbcbcb; } </style></head><body>
<div class="mybtn">按钮效果</div>
</body></html>
时间： 2024-10-10 19:33:00