﻿/* 基础按钮样式 */
.ios6-button {
    display: inline-block;
    padding: 10px 20px;
    margin: 5px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
    text-decoration: none;
    text-align: center;
    /* 渐变背景 */
    background: linear-gradient(to bottom, #f7f7f7 0%, #e5e5e5 50%, #d7d7d7 51%, #e5e5e5 100%);
    /* 边框和圆角 */
    border: 1px solid #b5b5b5;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    /* 光泽效果 */
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease;
    cursor: pointer;
}

    /* 光泽效果 */
    .ios6-button:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 40%;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.2) 100%);
        border-radius: 6px 6px 0 0;
        transition: all 0.2s ease;
    }

    /* 悬停效果 */
    .ios6-button:hover {
        background: linear-gradient(to bottom, #f9f9f9 0%, #e8e8e8 50%, #dadada 51%, #e8e8e8 100%);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
        /*transform: translateY(-1px);*/
    }

        .ios6-button:hover:after {
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.3) 100%);
        }

    /* 按下效果 */
    .ios6-button:active {
        background: linear-gradient(to bottom, #d7d7d7 0%, #e5e5e5 50%, #f7f7f7 51%, #e5e5e5 100%);
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
        transform: translateY(0);
    }

    /* 蓝色按钮 */
    .ios6-button.blue {
        color: white;
        text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.3);
        background: linear-gradient(to bottom, #6bb3f2 0%, #4a90d9 50%, #3b7fc9 51%, #4a90d9 100%);
        border-color: #2a5d8a;
    }

        .ios6-button.blue:after {
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 100%);
        }

        .ios6-button.blue:active {
            background: linear-gradient(to bottom, #3b7fc9 0%, #4a90d9 50%, #6bb3f2 51%, #4a90d9 100%);
        }

    /* 红色按钮 - 删除/危险操作 */
    .ios6-button.red {
        color: white;
        text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.3);
        background: linear-gradient(to bottom, #ff5e5e 0%, #e53c3c 50%, #d62e2e 51%, #e53c3c 100%);
        border-color: #8a2a2a;
    }

        .ios6-button.red:after {
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 100%);
        }

        .ios6-button.red:active {
            background: linear-gradient(to bottom, #d62e2e 0%, #e53c3c 50%, #ff5e5e 51%, #e53c3c 100%);
        }

    /* 绿色按钮 - 确认/成功 */
    .ios6-button.green {
        color: white;
        text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.3);
        background: linear-gradient(to bottom, #6fcf2d 0%, #4cb91e 50%, #3dab11 51%, #4cb91e 100%);
        border-color: #2a6e12;
    }

        .ios6-button.green:after {
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 100%);
        }

        .ios6-button.green:active {
            background: linear-gradient(to bottom, #3dab11 0%, #4cb91e 50%, #6fcf2d 51%, #4cb91e 100%);
        }

    /* 橙色按钮 - 警告/注意 */
    .ios6-button.orange {
        color: white;
        text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.3);
        background: linear-gradient(to bottom, #ffa726 0%, #f57c00 50%, #e87100 51%, #f57c00 100%);
        border-color: #a05200;
    }

        .ios6-button.orange:after {
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 100%);
        }

        .ios6-button.orange:active {
            background: linear-gradient(to bottom, #e87100 0%, #f57c00 50%, #ffa726 51%, #f57c00 100%);
        }

    /* 紫色按钮 - 特殊操作 */
    .ios6-button.purple {
        color: white;
        text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.3);
        background: linear-gradient(to bottom, #a56bf2 0%, #8a4ed9 50%, #7b40c9 51%, #8a4ed9 100%);
        border-color: #4e2a8a;
    }

        .ios6-button.purple:after {
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 100%);
        }

        .ios6-button.purple:active {
            background: linear-gradient(to bottom, #7b40c9 0%, #8a4ed9 50%, #a56bf2 51%, #8a4ed9 100%);
        }

    /* 灰色按钮 - 禁用/次要 */
    .ios6-button.gray {
        color: #666;
        text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
        background: linear-gradient(to bottom, #e0e0e0 0%, #c7c7c7 50%, #b9b9b9 51%, #c7c7c7 100%);
        border-color: #8a8a8a;
    }

        .ios6-button.gray:after {
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.2) 100%);
        }

        .ios6-button.gray:active {
            background: linear-gradient(to bottom, #b9b9b9 0%, #c7c7c7 50%, #e0e0e0 51%, #c7c7c7 100%);
        }

    /* 黑色按钮 - 强调/夜间模式 */
    .ios6-button.black {
        color: white;
        text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.5);
        background: linear-gradient(to bottom, #000000 0%, #3d3d3d 50%, #333333 51%, #141212 100%);
        border-color: #1a1a1a;
    }

        .ios6-button.black:after {
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 100%);
        }

        .ios6-button.black:active {
            background: linear-gradient(to bottom, #2e2e2e 0%, #3d3d3d 50%, #5a5a5a 51%, #3d3d3d 100%);
        }

    /* 粉色按钮 - 特殊/女性主题 */
    .ios6-button.pink {
        color: white;
        text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.3);
        background: linear-gradient(to bottom, #ff8edf 0%, #e56cc6 50%, #d65eb8 51%, #e56cc6 100%);
        border-color: #8a2a6e;
    }

        .ios6-button.pink:after {
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 100%);
        }

        .ios6-button.pink:active {
            background: linear-gradient(to bottom, #d65eb8 0%, #e56cc6 50%, #ff8edf 51%, #e56cc6 100%);
        }
