1. Border swing effect
HTML
<button
data-text="Start"
class="btn btn-primary btn-ghost btn-border-stroke btn-text-float-up"
>
<div class="btn-borders">
<div class="border-top"></div>
<div class="border-right"></div>
<div class="border-bottom"></div>
<div class="border-left"></div>
</div>
<span class="btn-text">Start</span>
</button>
Copy the codeCSS
body { display: flex; height: 100vh; justify-content: center; align-items: center; text-align: center; background: #1A1E23; } .btn { --hue: 190; - ease - in - duration: 0.25 s; -- Ease-in-Beta: Cubic bezier(0.95, 0.05, 0.795, 0.035); - ease - out - duration: 0.65 s; --ease-out-delay: var(--ease-in-duration); -- Ease-out-of-beta: Cubic bezier(0.19, 1, 0.22, 1); position: relative; padding: 1rem 3rem; font-size: 1rem; The line - height: 1.5; color: white; text-decoration: none; background-color: hsl(var(--hue), 100%, 41%); border: 1px solid hsl(var(--hue), 100%, 41%); outline: transparent; overflow: hidden; cursor: pointer; user-select: none; white-space: nowrap; The transition: 0.25 s; &:hover { background: hsl(var(--hue), 100%, 31%); } &-primary { --hue: 171; } &-ghost { color: hsl(var(--hue), 100%, 41%); background-color: transparent; border-color: hsl(var(--hue), 100%, 41%); &:hover { color: white; }} & -stroke {border-color: hsla(var(--hue), 100%, 41%, 0.35); .btn-borders { position: absolute; top: 0; left: 0; width: 100%; height: 100%; .border-top { position: absolute; top: 0; width: 100%; height: 1px; background: hsl(var(--hue), 100%, 41%); transform: scaleX(0); transform-origin: left; } .border-right { position: absolute; right: 0; width: 1px; height: 100%; background: hsl(var(--hue), 100%, 41%); transform: scaleY(0); transform-origin: bottom; } .border-bottom { position: absolute; bottom: 0; width: 100%; height: 1px; background: hsl(var(--hue), 100%, 41%); transform: scaleX(0); transform-origin: left; } .border-left { position: absolute; left: 0; width: 1px; height: 100%; background: hsl(var(--hue), 100%, 41%); transform: scaleY(0); transform-origin: bottom; } // when unhover, ease-out left, bottom; ease-in right, top .border-left { transition: var(--ease-out-duration) var(--ease-out-delay) var(--ease-out-exponential); } .border-bottom { transition: var(--ease-out-duration) var(--ease-out-delay) var(--ease-out-exponential); } .border-right { transition: var(--ease-in-duration) var(--ease-in-exponential); } .border-top { transition: var(--ease-in-duration) var(--ease-in-exponential); } } &:hover { color: hsl(var(--hue), 100%, 41%); background: transparent; .border-top, .border-bottom { transform: scaleX(1); } .border-left, .border-right { transform: scaleY(1); } // when hover, ease-in left, bottom; ease-out right, top .border-left { transition: var(--ease-in-duration) var(--ease-in-exponential); } .border-bottom { transition: var(--ease-in-duration) var(--ease-in-exponential); } .border-right { transition: var(--ease-out-duration) var(--ease-out-delay) var(--ease-out-exponential); } .border-top { transition: var(--ease-out-duration) var(--ease-out-delay) var(--ease-out-exponential); } } } &-text-float-up { &::after { position: absolute; content: attr(data-text); top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; opacity: 0; transform: translateY(35%); The transition: 0.25 s ease - out; } // when hover, ease-in top-text; ease-out bottom-text .btn-text { display: block; The transition: 0.75 s to 0.1 s var (-- ease - out - an exponential); } &:hover { // when hover, ease-in bottom-text; ease-out top-text .btn-text { opacity: 0; transform: translateY(-25%); The transition: 0.25 s ease - out; } &::after { opacity: 1; transform: translateY(0); The transition: 0.75 s to 0.1 s var (-- ease - out - an exponential); }}}}Copy the coderendering
2. Implement multiple borders
HTML
<button class="btn btn-primary btn-ghost btn-multiple-border-stroke">
<div class="btn-borders-group">
<div class="border-top"></div>
<div class="border-right"></div>
<div class="border-bottom"></div>
<div class="border-left"></div>
</div>
<div class="btn-borders-group">
<div class="border-top"></div>
<div class="border-right"></div>
<div class="border-bottom"></div>
<div class="border-left"></div>
</div>
<div class="btn-borders-group">
<div class="border-top"></div>
<div class="border-right"></div>
<div class="border-bottom"></div>
<div class="border-left"></div>
</div>
<span class="btn-text">Start</span>
</button>
Copy the codeCSS
body { display: flex; height: 100vh; justify-content: center; align-items: center; text-align: center; background: #1A1E23; } .btn { --hue: 190; - ease - in - duration: 0.25 s; - ease - out - duration: 0.65 s; --ease-out-delay: var(--ease-in-duration); position: relative; padding: 1rem 3rem; font-size: 1rem; The line - height: 1.5; color: white; text-decoration: none; background-color: hsl(var(--hue), 100%, 41%); border: 1px solid hsl(var(--hue), 100%, 41%); outline: transparent; cursor: pointer; user-select: none; white-space: nowrap; The transition: 0.25 s; &:hover { background: hsl(var(--hue), 100%, 31%); } &-primary { --hue: 171; } &-ghost { color: hsl(var(--hue), 100%, 41%); background-color: transparent; border-color: hsl(var(--hue), 100%, 41%); &:hover { color: white; } } &-multiple-border-stroke { border-color: transparent; .btn-borders-group { position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; Border: 1px solid HSLA (var(--hue), 100%, 41%, 0.35); border: 1px solid HSLA (var(--hue), 100%, 41%, 0.35); &:nth-child(1) { left: -8px; padding: 0 8px; } &:nth-child(2) { top: -8px; padding: 8px 0; } &:nth-child(3) { top: -4px; left: -4px; padding: 4px; } .border-top { position: absolute; top: 0; width: 100%; height: 1px; background: hsl(var(--hue), 100%, 41%); transform: scaleX(0); transform-origin: left; } .border-right { position: absolute; right: 0; width: 1px; height: 100%; background: hsl(var(--hue), 100%, 41%); transform: scaleY(0); transform-origin: bottom; } .border-bottom { position: absolute; bottom: 0; width: 100%; height: 1px; background: hsl(var(--hue), 100%, 41%); transform: scaleX(0); transform-origin: left; } .border-left { position: absolute; left: 0; width: 1px; height: 100%; background: hsl(var(--hue), 100%, 41%); transform: scaleY(0); transform-origin: bottom; } // when unhover, ease-in top, right; ease-out bottom, left .border-left { transition: Var (-- ease-out-of-duration) var(-- ease-out-of-delay) cubic-bezier(0.2, 1, 0.2, 1); }. Border-bottom {transition: var(-- ease-out-of-duration) var(-- ease-out-of-delay) cubic-bezier(0.2, 1, 0.2, 1); }. Border-right {transition: var(--ease-in-duration) cubic-bezier(1, 0, 0.8, 0); }. Border-top {transition: var(--ease-in-duration) cubic-bezier(1, 0, 0.8, 0); } } &:hover { color: hsl(var(--hue), 100%, 41%); background: transparent; .border-top, .border-bottom { transform: scaleX(1); } .border-left, .border-right { transform: scaleY(1); } // when hover, ease-in bottom, left; Ease-out top, right.border-left {transition: var(--ease-in-duration) cubic-bezier(1, 0, 0.8, 0); transition: var(--ease-in-duration) cubic-bezier(1, 0, 0.8, 0); }. Border-bottom {transition: var(--ease-in-duration) cubic-bezier(1, 0, 0.8, 0); }. Border-right {transition: var(-- ease-out-of-duration) var(-- ease-out-of-delay) cubic-bezier(0.2, 1, 0.2, 1); }. Border-top {transition: var(-- ease-out-of-duration) var(-- ease-out-of-delay) cubic-bezier(0.2, 1, 0.2, 1); }}}}Copy the coderendering
3. Flash button
HTML
<button class="btn btn-primary btn-ghost btn-shine">
hover me
</button>
Copy the codeCSS
body { display: flex; height: 100vh; justify-content: center; align-items: center; background: #1A1E23; } .btn { --hue: 190; position: relative; padding: 1rem 3rem; font-size: 1rem; The line - height: 1.5; color: white; text-decoration: none; text-transform: uppercase; background-color: hsl(var(--hue), 100%, 41%); border: 1px solid hsl(var(--hue), 100%, 41%); outline: transparent; overflow: hidden; cursor: pointer; user-select: none; white-space: nowrap; The transition: 0.25 s; &:hover { background: hsl(var(--hue), 100%, 31%); } &-primary { --hue: 187; } &-ghost { color: hsl(var(--hue), 100%, 41%); background-color: transparent; border-color: hsl(var(--hue), 100%, 41%); &:hover { color: white; } } &-shine { color: white; &::before { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; Background: Linear-gradient (120DEg transparent, HSLA (var(-- Hue), transparent); background: Linear-gradient (120DEg transparent, HSLA (-- Hue), transparent); transform: translateX(-100%); The transition: 0.6 s; } &:hover { background: transparent; Box-shadow: 00 20px 10px HSLA (var(--hue), 100%, 41%, 0.5); } &:hover::before { transform: translateX(100%); }}}Copy the coderendering
4. Sidebar buttons
HTML
<input type="checkbox" id="burger-toggle"> <label for="burger-toggle" class="burger-menu"> <div class="line"></div> <div class="line"></div> <div class="line"></div> </label> <div class="overlay"></div>Copy the codeCSS
body { display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; overflow: hidden; background: #ECEFFC; } #burger-toggle { appearance: none; opacity: 0; &:checked { // Here don't use box-shadow to make overlay because it will damage performance. &~.overlay { opacity: 1; transform: scale(160); } &~.burger-menu { .line { &:nth-child(1) { transform: translateY(calc(var(--burger-menu-radius) / 5)) rotate(45deg); } &:nth-child(2) { transform: scaleX(0); } &:nth-child(3) { transform: translateY(calc(var(--burger-menu-radius) / -5)) rotate(-45deg); } } } } } .burger-menu { --burger-menu-radius: 4em; position: relative; z-index: 100; display: block; width: var(--burger-menu-radius); height: var(--burger-menu-radius); background: white; Border: solid 2px HSLA (184, 9%, 62%, 0.4); border-radius: 50%; outline: none; cursor: pointer; The transition: 0.5 s ease - in-out; .line { position: absolute; left: 25%; width: 50%; height: 3px; Background: HSLA (210, 29%, 24%, 0.3); border-radius: 10px; overflow: hidden; 0.5 s help ease the transition: all; &:nth-child(1) { top: 30%; } &:nth-child(2) { top: 50%; } &:nth-child(3) { top: 70%; } &::after { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: #2980b9; transform: translateX(-100%); 0.25 s help ease the transition: all; } @for $I from 2 through 3 {&:nth-child(#{$I})::after {transition-delay: 0.1s * ($I - 1); } } } &:hover { box-shadow: 0.4px 0.4px 0.8px rgba(0, 0, 0, 0.042), 1px 1px 2px rgba(0, 0, 0, 0.061), 1.9px 1.9px 3.8px rgba(0, 0, 0, 0.075), Rgba (0, 0, 0, 0.089), 6.3px 6.3px 12.5px rgba(0, 0, 0, 0.108), 15px 15px 30px rgba(0, 0, 0, 0.15); .line::after { transform: translateX(0); } } } .overlay { position: absolute; width: 2em; height: 2em; Background: HSLA (204, 64%, 44%, 0.9); border-radius: 50%; opacity: 0; The transition: 0.5 s ease - in-out; will-change: transform; }Copy the coderendering
5. Scarlet Moon
HTML
<div class="loading"></div>
Copy the codeCSS
body { display: flex; justify-content: center; align-items: center; height: 100vh; background: black; } .loading { position: relative; width: 8em; height: 8em; background: black; border-radius: 50%; Box-shadow: inset 0.5em -0.5em crimson; animation: spin 2s linear infinite; &::before, &::after { position: absolute; content: ""; width: 100%; height: 100%; background: inherit; border-radius: inherit; box-shadow: inherit; } &::before { filter: blur(5px); } &::after { filter: blur(10px); } } @keyframes spin { to { transform: rotate(1turn); }}Copy the coderendering
6. Neon text
HTML
<div class="neon">fushigi no monogatari</div>
Copy the codeCSS
body { display: flex; height: 100vh; justify-content: center; align-items: center; text-align: center; background: black; } .neon { color: #cce7f8; The font - size: 2.5 rem; font-family: 'Pacifico', cursive; text-transform: uppercase; Animation: Shining 0.1s alternate infinite; } @keyframes shining { from { text-shadow: 0 0 6px rgba(182, 211, 207, 0.9), 0 0 30px rgba(182, 211, 207, 0.3), 0 0 12px rgba(15, 115, 223, 0.5), 0 0 21px rgba(15, 115, 223, 0.9), 0 0 34px rgba(15, 115, 223, 0.8), 0 0 54px rgba(15, 115, 223, 0.9); } to { text-shadow: 0 0 6px rgba(182, 211, 207, 1), 0 0 30px rgba(182, 211, 207, 0.4), 0 0 12px rgba(15, 115, 223, 0.6), 0 0 22px rgba(15, 115, 223, 0.8), 0 0 38px Rgba (15, 115, 223, 0.9), 0 0 60px Rgba (15, 115, 223, 1); }}Copy the coderendering
7. Text effects
HTML
<ul>
<li><a href="#">home</a></li>
<li><a href="#">archives</a></li>
<li><a href="#">tags</a></li>
<li><a href="#">categories</a></li>
<li><a href="#">about</a></li>
</ul>
Copy the codeCSS
body { display: flex; height: 100vh; justify-content: center; align-items: center; text-align: center; background: #1A1E23; } ul { display: flex; flex-direction: column; align-items: start; list-style-type: none; li { padding: 6px 0; a { --fill-color: #198CE6; position: relative; display: block; padding: 4px 0; font: 700 3rem Raleway, sans-serif; text-decoration: none; text-transform: uppercase; -webkit-text-stroke: 2px var(--fill-color); background: linear-gradient(var(--fill-color) 0 100%) left / 0 no-repeat; color: transparent; background-clip: text; The transition: 0.5 s linear; &:hover { background-size: 100%; }}}}Copy the coderendering
8. Flip the image
HTML
<div class="scene"> <div class="card"> <div class="card__face card__face--front"> <img src="https://i.loli.net/2019/11/23/cnKl1Ykd5rZCVwm.jpg" /> </div> <div class="card__face card__face--back"> <img src="https://i.loli.net/2019/11/16/cqyJiYlRwnTeHmj.jpg" /> </div> </div> <div class="card"> <div class="card__face card__face--front"> <img src="https://i.loli.net/2019/11/16/FLnzi5Kq4tkRZSm.jpg" /> </div> <div class="card__face card__face--back"> <img src="https://i.loli.net/2019/10/18/buDT4YS6zUMfHst.jpg" /> </div> </div> <div class="card"> <div class="card__face card__face--front"> <img src="https://i.loli.net/2019/10/18/uXF1Kx7lzELB6wf.jpg" /> </div> <div class="card__face card__face--back"> <img src="https://i.loli.net/2019/11/03/RtVq2wxQYySDb8L.jpg" /> </div> </div> </div>Copy the codeCSS
body { display: flex; justify-content: center; align-items: center; height: 100vh; background: black; } .scene { width: 1000px; display: flex; justify-content: space-between; perspective: 800px; .card { position: relative; width: 240px; height: 300px; color: white; cursor: pointer; transition: 1s ease-in-out; transform-style: preserve-3d; & : hover {transform: rotateY turn (0.5); } .card__face { position: absolute; top: 0; left: 0; width: 100%; height: 100%; backface-visibility: hidden; transition: 1s ease-in-out; -webkit-box-reflect: below 0 Linear-gradient (transparent, transparent, Rgba (0, 0, 0, 0.4)); img { width: 240px; height: 300px; object-fit: cover; } &--back {transform: rotateY(0.5turn); }}}}Copy the coderendering
9.Imagehover
HTML
Where IMGHVR-fade is the corresponding CSS hover effect, The Class name https://www.shejidaren.com/examples/imagehover-css/index.html < head > < link rel = "stylesheet" </head> <figure class= "imghVR-fade" > <img SRC = "#" > <figure caption> </figure>Copy the codeCSS
[class^= 'imghVR -'], [class*= 'imghVR -'] {background-color: #D14233; }Copy the code