.btn { background: transparent; border: 2px solid #00bcd4; color: #00bcd4; padding: 8px; font-size: 16px; transition: all 0.3s ease; } .btn:hover { background: #00bcd4; color: #fff; }
上面的代码就是一个简单的制作透明按钮的CSS代码,通过设置按钮的背景颜色为透明,边框颜色为实色,同时设置边框宽度和文本颜色,可以实现一个简单的透明按钮。同时,通过设置按钮的:hover伪类,可以实现当鼠标移动到按钮上面时,按钮的背景颜色和文本颜色都发生变化。
在实际应用中,大家可以根据需求不断调整按钮的样式,使其更符合设计要求。