.button-container { display: flex; /* 使用 flexbox */ flex-wrap: wrap; /* 允许换行 */ justify-content: center; /* 居中对齐 */ } /* 媒体查询:手机端样式 */ @media (max-width: 768px) { .button-container { flex-direction: column; /* 手机端纵向排列 */ align-items: center; /* 居中对齐 */ } } /* From Uiverse.io by eirikvold */ button { font-family: inherit; font-size: 18px; background: linear-gradient(to bottom, #4dc7d9 0%,#66a6ff 100%); color: white; padding: 0.8em 1.2em; display: flex; align-items: center; justify-content: center; border: none; border-radius: 25px; box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2); transition: all 0.3s; } button:hover { transform: translateY(-3px); box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3); } button:active { transform: scale(0.95); box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); } button span { display: block; margin-left: 0.4em; transition: all 0.3s; } button svg { width: 18px; height: 18px; fill: white; transition: all 0.3s; } button .svg-wrapper { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.2); margin-right: 0.5em; transition: all 0.3s; } button:hover .svg-wrapper { background-color: rgba(255, 255, 255, 0.5); } button:hover svg { transform: rotate(45deg); }