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 .3s ease-in-out, background-color .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 .3s ease-in-out; will-change: transform; } .anticon-class { display: block; text-align: center; transform: scale(0.83); font-family: "Lucida Console", Consolas; white-space: nowrap; .ant-badge { transition: color .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; }