CSS 머티리얼디자인 플로팅 버튼

CSS material design floating button

CSS 머티리얼디자인 플로팅 버튼

1 예시 1

<style>
.btn-floating {
    color: #fff;
    padding: 0;
    width: 55.5px; height: 55.5px;
    display: inline-block;
    outline: 0;
    border: none;
    text-decoration: none;
    background: #2196F3;
    text-align: center;
    border-radius: 50%;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.btn-floating:hover {
    background: #42A5F5;
}
.btn-floating div {
    font-size: 1.8em;
    padding: 0;
    margin: .22em 0 0 0;
}
</style>
 
<br>
<a href='#' class='btn-floating'><div>+</div></a> 
<br><br>
<a href='#' class='btn-floating'><div>-</div></a>

2 예시 2: 폰트어썸 활용

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
<style>
.btn-floating {
    color: #fff;
    padding: 0;
    width: 55.5px; height: 55.5px;
    display: inline-block;
    outline: 0;
    border: none;
    text-decoration: none;
    background: #2196F3;
    text-align: center;
    border-radius: 50%;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.btn-floating:hover {
    background: #42A5F5;
}
.btn-floating div {
    font-size: 1.8em;
    padding: 0;
    margin: .22em 0 0 0;
}
</style>
 
<br>
<a href='#' class='btn-floating'><div><i class="fa fa-pencil"></i></div></a>
<br><br>
<a href='#' class='btn-floating'><div><i class="fa fa-share"></i></div></a>
<br><br>
<a href='#' class='btn-floating'><div><i class="fa fa-retweet"></i></div></a>

3 같이 보기

• CSS 머티리얼디자인 양각 버튼
• 머티리얼디자인

4 참고

• https://www.google.com/design/spec/components/buttons.html