728x90
버튼 디자인 1
여러개의 버튼이 같은 레벨에 있어야할 때 사용할 수 있다.
✔️ HTML
<div class="buttonBox">
<a class="button red" href="javascript:;">
<span>Button</span>
<span class="material-icons-outlined icons">delete</span>
</a>
<a class="button blue" href="javascript:;">
<span>Button</span>
<span class="material-icons-outlined icons">save</span>
</a>
<a class="button green" href="javascript:;">
<span>Button</span>
<span class="material-icons-outlined icons">done</span>
</a>
</div>
✔️ CSS
.buttonBox {
display: flex;
width: 100%;
height: 50px;
}
.buttonBox .button {
flex: 1;
color: #aaa;
background: #fff;
border-right: 1px solid #ccc;
font-size: 17px;
text-align: center;
line-height: 50px;
transition: all 0.5s ease-in-out;
text-decoration: none;
}
.buttonBox .button:last-child {
border: 0px;
}
.buttonBox .button:hover {
flex: 2;
}
.buttonBox .button.red:hover {
color: #fff;
background: #d32f2f;
}
.buttonBox .button.blue:hover {
color: #fff;
background: #1976d2;
}
.buttonBox .button.green:hover {
color: #fff;
background: #388e3c;
}
.buttonBox .button .icons {
vertical-align: text-bottom;
width: 0;
margin-left: 5px;
overflow: hidden;
font-size: 22px;
transition: width 0.5s ease-in-out;
}
@media all and (min-width: 420px) {
.buttonBox .button:hover .icons {
width: 20px;
}
}
✔️ GitHub
반응형
'개발 > UI' 카테고리의 다른 글
체크박스 디자인-2 (checkbox Design-2 with CSS) (10) | 2023.05.21 |
---|---|
체크박스 디자인-1 (checkbox Design-1 with CSS) (9) | 2023.05.09 |
스위치 디자인-1 (Switch Design-1 with CSS) (1) | 2023.05.02 |
알림 디자인-1 (notification Design-1 with CSS) (2) | 2023.05.02 |
버튼 디자인-2 (button Design-2 with CSS) (1) | 2023.04.27 |
댓글