button按钮下边框有立体效果样式
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了button按钮下边框有立体效果样式相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <style> .Button { display: inline-block; margin: 0; min-width: 100px; padding: .5rem; border: 1px solid; border-color: #3ec9cb; border-radius: 2px; background: #3ec9cb; color: #fff; font-size: 1rem; font-weight: 700; line-height: 1.5; text-align: center; text-transform: capitalize; text-decoration: none; -webkit-transition: .3s ease; transition: .3s ease; -webkit-transition-property: border-color,background-color,color; transition-property: border-color,background-color,color; } .Button.u-cta { border-bottom-color: #189697; border-bottom-width: thick; } .Button.u-large { font-size: 1.25rem; padding: .75em; } </style> <button class="Button l-w-100 l-ma0 l-h5 u-large u-cta" data-reactid="7">Subscribe</button> </body> </html>
以上是关于button按钮下边框有立体效果样式的主要内容，如果未能解决你的问题，请参考以下文章