handsome-css3-lib
handsome-css3-lib copied to clipboard
ZiYi0414
Amazingly handsome Open-Source UI components made with HTML and CSS. Collection of very handsome CSS animations and special effects on the Internet（在网上收集各种帅气的CSS3特效和动画，按钮标题等各种...
--- title: shimmer made_by: nameless theme: dark --- ```css @property --shimmer { syntax: ""; inherits: false; initial-value: 33deg; } @keyframes shimmer { 0% { --shimmer: 0deg; } 100% { --shimmer:...
--- title: abanoubMagdy made_by: abanoubMagdy --- ```css .loader { --dim: 3rem; width: var(--dim); height: var(--dim); position: relative; animation: spin988 2s linear infinite; } .loader .circle { --color: #333; --dim: 1.2rem;...
--- title: ecoder made_by: ecoder --- ```css /* @styled-jsx=scoped */ button { /* Variables */ --button_radius: 0.75em; --button_color: #e8e8e8; --button_outline_color: #000000; font-size: 17px; font-weight: bold; border: none; border-radius: var(--button_radius); background:...
--- title: curvy-crab-71 made_by: biswacpcode theme: dark --- ```css button { color: white; text-decoration: none; font-size: 25px; border: none; background: none; font-weight: 600; font-family: 'Poppins', sans-serif; } button::before { margin-left:...
--- title: curly-wombat-58 made_by: adamgiebl --- ```css button { border: none; display: block; position: relative; padding: 0.7em 2.4em; font-size: 18px; background: transparent; cursor: pointer; user-select: none; overflow: hidden; color: royalblue;...
--- title: cssbuttons-io made_by: cssbuttons-io --- ```css button { --color: #560bad; font-family: inherit; display: inline-block; width: 8em; height: 2.6em; line-height: 2.5em; margin: 20px; position: relative; overflow: hidden; border: 2px solid...
--- title: Crush made_by: crush. --- ```css button { border: none; width: 140px; height: 50px; color: #fff; z-index: 1; display: flex; background: #000; position: relative; } button p { margin:...
--- title: brown-gecko-29 made_by: Shoh2008 theme: dark --- ```css .box { height: 50px; width: 150px; } button { outline: none; position: relative; border: 2px solid #ffffff; background: radial-gradient(#f200ff, #de7ef4); height:...
--- title: big-stingray-4 made_by: Tahmazi99 --- ```css /* From uiverse.io by @Ali-Tahmazi99 */ button { display: inline-block; width: 150px; height: 50px; border-radius: 10px; border: 1px solid #03045e; position: relative; overflow:...
--- title: big-robin-49 made_by: Sameer2244 theme: dark --- ```css .btn-container { width: fit-content; height: fit-content; position: relative; } .svg { position: absolute; top: 50%; left: 50%; z-index: -1; transform: translate(-50%,...