ul.anticons-list { margin: 10px 0; list-style: none; overflow: hidden; li { float: left; width: 16.66%; text-align: center; list-style: none; cursor: pointer; height: 100px; color: #555; transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out; position: relative; margin: 3px 0; border-radius: 4px; background-color: #fff; overflow: hidden; padding: 10px 0 0; .anticon { font-size: 36px; margin: 12px 0 8px; transition: transform 0.3s ease-in-out; will-change: transform; } .anticon-class { display: block; text-align: center; transform: scale(0.83); font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; white-space: nowrap; .ant-badge { transition: color 0.3s ease-in-out; } } &:hover { background-color: @primary-color; color: #fff; .anticon { transform: scale(1.4); } .ant-badge { color: #fff; } } &.copied:hover { color: rgba(255, 255, 255, 0.2); } &:after { position: absolute; top: 0; left: 0; height: 100%; width: 100%; content: 'Copied!'; text-align: center; line-height: 110px; color: #fff; transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28); opacity: 0; } &.copied:after { opacity: 1; top: -10px; } } } .copied-code { font-size: 12px; background: #f5f5f5; border-radius: 2px; padding: 2px 4px 2px; }