按钮模版:btn-9
效果展示
实现思路
鼠标悬浮时,将背景颜色设为透明,将文字颜色设置成原来的背景颜色
将 :before
和 :after
两个伪元素的宽度变长,配合上 ransition
实现动画效果
实现代码
1
| <button class="btn-9">BTN-9</button>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
| .btn-9 { position: relative; padding: 16px 28px; border: none; color: #fff; background: linear-gradient(0deg, rgba(255, 27, 0, 1) 0%, rgba(251, 75, 2, 1) 100%); cursor: pointer; } .btn-9:hover { color: #f0094a; background: transparent; box-shadow: none; } .btn-9:before, .btn-9:after { content: ''; position: absolute; top: 0; right: 0; height: 2px; width: 0; background: #f0094a; box-shadow: -1px -1px 5px 0px #fff, 7px 7px 20px 0px #0003, 4px 4px 5px 0px #0002; transition: all .3s ease; } .btn-9:after { right: inherit; top: inherit; left: 0; bottom: 0; } .btn-9:hover:before, .btn-9:hover:after { width: 100%; transition: all .4s ease; }
|