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>