uniapp 按钮样式 - 渐变、扁平、立体、圆形，打造精美界面 - 常规

以下是一些好看的按钮样式：

渐变色按钮

<view class='gradient-button'>
  <button class='btn'>按钮</button>
</view>

<style>
  .gradient-button {
    background: linear-gradient(to right, #3ab5d7, #57c9e0);
    border-radius: 25px;
    padding: 10px;
  }
  .btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 16px;
  }
</style>

扁平化按钮

<button class='flat-button'>按钮</button>

<style>
  .flat-button {
    background-color: #fff;
    border: 2px solid #3ab5d7;
    border-radius: 25px;
    color: #3ab5d7;
    font-size: 16px;
    padding: 10px 20px;
  }
</style>

立体按钮

<button class='three-d-button'>按钮</button>

<style>
  .three-d-button {
    background-color: #3ab5d7;
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 20px;
    padding: 10px 20px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  }
</style>

圆形按钮

<button class='circle-button'>按钮</button>

<style>
  .circle-button {
    background-color: #3ab5d7;
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 16px;
    padding: 10px;
    width: 50px;
    height: 50px;
  }
</style>