释放双眼,带上耳机,听听看~!
昨天抽时间把创建圈子按钮美化了一下,加了一个蓝色背景和动态边框效果,方法也很简单,把以下css代码加入wp-content/themes/b2/Assets/fontend/style.css文件就可以了。
.circle-widget-button .text { display: flex; align-items: center; justify-content: center; height: 3vh; } .circle-widget-button .text { border: 0px; background: #2d79fc; text-transform: uppercase; color: #fff; font-weight: bold; position: relative; outline: none; padding: 10px 20px; box-sizing: border-box; border-radius: none; } button::before, button::after { box-sizing: inherit; position: absolute; content: ''; border: 2px solid transparent; width: 0; height: 0; } button::after { bottom: 0; right: 0; } button::before { top: 0; left: 0; } .circle-widget-button .text:hover::before, button:hover::after { width: 100%; height: 100%; } .circle-widget-button .text:hover::before { border-top-color: #1E90FF; border-right-color: #2d79fc; transition: width 0.3s ease-out, height 0.3s ease-out 0.3s; } .circle-widget-button .text:hover::after { border-bottom-color: #1E90FF; border-left-color: #2d79fc; transition: border-color 0s ease-out 0.6s, width 0.3s ease-out 0.6s, height 0.3s ease-out 1s; }