微件:Mpbutton

<style> .mpbutton {

 display: inline-flex;
 flex-direction: column;
 position: relative;
 align-items: center;
 min-width: 40px;
 min-height: 40px;
 aspect-ratio: 1;
 margin: 2px;
 background-color: #343434;
 transition: background-color 0.5s;

 padding-bottom: 4px;

}

@media screen and (min-width: 960px) {

 .mpbutton-icon {
   margin-top: 16px;
 }

 .mpbutton-label {
   font-size: 16px;
   letter-spacing: 2px;
 }

}

@media screen and (max-width: 960px) {

 .mpbutton-icon {
   margin-top: 4px;
   margin-bottom: 15px;
 }

 .mpbutton-label {
   font-size: 8px;
 }

}

.mpbutton-icon {

 max-width: 96px;
 max-height: 96px;
 min-width: 30px;
 min-height: 30px;
 filter: drop-shadow(0px 18px 6px rgba(255, 255, 255, 0.5));

}

.mpbutton-label {

 position: absolute;
 bottom: 10px;
 width: 100%;
 color: white;
 text-align: center;
 font-weight: 900;
 font-family: Inter var, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
 transition: all 0.5s;
 user-select: none;

}

.mpbutton:hover {

 background-color: var(--additon-title);

}

.mpbutton:hover .mpbutton-label.zh, .mpbutton-label.en {

 opacity: 0;

}

.mpbutton:hover .mpbutton-label.en, .mpbutton-label.zh {

 opacity: 1;

}

1. mpbutton-container {

 display: grid;
 grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
 max-width: 920px;
 min-width: 110px;
 margin: 0 auto;

} </style>