본문 바로가기
반응형

CSS5

체크박스 디자인-2 (checkbox Design-2 with CSS) 체크박스 디자인 2 기본 체크박스로 활용할 수 있다. ✔️ HTML ✔️ CSS .cbxBox { position: relative; left: 50%; } .box { display: flex; align-items: center; } .box input[type="checkbox"] { position: relative; height: 35px; width: 35px; appearance: none; background-color: #FFF; border-radius: 10px; cursor: pointer; overflow: hidden; } .box input[type="checkbox"]::after { content: ''; display: block; height: 15px; width: 8.. 2023. 5. 21.
체크박스 디자인-1 (checkbox Design-1 with CSS) 체크박스 디자인 1 기본 체크박스로 활용할 수 있다. ✔️ HTML ✔️ CSS .cbxBox { position: relative; } .cbxBox .cbx { position: relative; display: block; width: 25px; height: 25px; border: 1px solid #a1a1a1; border-radius: 5px; cursor: pointer; transition: all 0.3s ease; } .cbxBox .cbx:after { content: ''; position: absolute; top: 2px; left: 10px; width: 5px; height: 14px; opacity: 0; transform: rotate(45deg) scale(0); b.. 2023. 5. 9.
스위치 디자인-1 (Switch Design-1 with CSS) 스위치 디자인 1 기본 스위치로 활용할 수 있다. ✔️ HTML ✔️ CSS .switch1 { position: relative; display: inline-block; font-size: 15px; width: 60px; height: 30px; } .switch1 .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #fff; border-radius: 20px; border: 1px solid #ccc; transition: all .4s ease-in-out; } .switch1 .slider:before { position: absolute; content: "".. 2023. 5. 2.
버튼 디자인-2 (button Design-2 with CSS) 버튼 디자인 2 좋아요 버튼 등으로 활용할 수 있는 버튼이다. ✔️ HTML favorite_border favorite Like ✔️ CSS .like { display: flex; gap: 10px; justify-content: space-between; align-items: center; padding: 15px; background-color: #fc8989; border-radius: 35px; border: 0px; font-size: 25px; margin: 0 auto; color: #fff; cursor: pointer; transition: all .5s; } .like:hover { background-color: #ff6e6e; } .like:hover .before { opac.. 2023. 4. 27.

티스토리툴바