목록HTML _CSS (226)

비전공자 개발일기

Send Button Animation

Send Message body { display: grid; place-items: center; height: 100vh; background: #000; } .btn { background: #49D75C; border: none; outline: none; cursor: pointer; border-radius: 35px; font-size: 1rem; font-weight: bold; color: #FFF; display: grid; place-items: center; transition: all 0.25s ease; position: relative; width: 210px; height: 60px; overflow: hidden; } .btn i { font-size: 1.45rem; po..
HTML _CSS 2023. 2. 8. 18:31
Bouncing Ball

body { background-color: #333; } .wrapper { display: flex; align-items: center; justify-content: center; position: relative; width: 100%; height: 23rem; background-color: #333; overflow: hidden; } .wrapper::before { background-color: #FFF; content: ""; position: absolute; border-radius: 1rem; height: 0.15rem; left: 2rem; right: 2rem; bottom: 2rem; } .wrapper .ball { background-color: #FFF; borde..
HTML _CSS 2023. 2. 7. 00:20
Pulse effect on button hover

Hover me *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { min-height: 100vh; display: grid; place-items: center; background: #151515; } .btn { font-family: sans-serif; font-weight: 700; background-color: #FFF; color: #151515; } .btn:link, .btn:visited { text-transform: uppercase; text-decoration: none; padding: 15px 40px; display: inline-block; border-radius: 100p..
HTML _CSS 2023. 2. 6. 19:17
Cocacola

cocacola Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus reprehenderit ex iste ea nobis, quis blanditiis amet nemo, aspernatur hic dolore commodi quia voluptatum adipisci soluta doloribus iusto, neque ipsa! Explore More * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #15..
HTML _CSS 2023. 2. 5. 00:25
Movie Streaming Website

MOVIES. Features Pricing Sign Up / Log In ☰ Features Pricing Sign Up / Log In Stream Any Movie at Anytime with No Individual Movie Costs or Rental Fees. TRY IT FREE Thousands of movies with no rental fees. Our monthly plan gives you unlimited access to our movie library. Forget the theaters! Exclusive access to movies in theaters on release date. NEW 4K MOVIES VIEW MORE Watch your favorite movie..
HTML _CSS 2023. 2. 4. 00:19
Animated Gender Selection Page Design

Which one are you? Male Female * { margin: 0; padding: 0; box-sizing: border-box; /* position: relative; */ } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #222; } .container { display: flex; flex-direction: column; align-items: center; gap: 20px; } .container img { max-width: 150px; } .container h2 { font-size: 2em; font-weight: 500; co..
HTML _CSS 2023. 2. 2. 11:38
Shine effect on hover

Hover to Shine *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { min-height: 100vh; display: grid; place-items: center; background: #121314; font-family: serif; } .btn { font-size: 1.5rem; padding: 1rem 3rem; color: #F4F4F4; text-transform: uppercase; text-decoration: none; border: 1px solid rgb(146, 148, 248); position: relative; overflow: hidden; } .btn:hover { b..
HTML _CSS 2023. 2. 1. 00:10
Bubbles on Button Clicked

Click me! *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { min-height: 100vh; display: grid; place-items: center; background: #151515; } .bubbly-button { display: inline-block; font-size: 1em; padding: 1em 2em; margin-top: 100px; margin-bottom: 60px; -webkit-appearance: none; appearance: none; background-color: #ff0081; color: #fff; border-radius: 4px; border: non..
HTML _CSS 2023. 1. 31. 00:14
이전 Prev 1 2 3 4 5 6 ··· 29 Next 다음