스타벅스 사이트 예제 전역버튼 공부
<!-- VISUAL -->
<section class="visual">
<div class="inner">
<div class="title">
<img src="./images/visual_title.png" alt="STABUCKS DELIGHTFUL START TO THE YEARS" />
<a href="javascript:void(0)" class="btn btn--brown">자세히 보기</a>
</div>
<img src="./images/visual_cup1.png" alt="new OATMEAL LATTE" class="cup1 image" />
<img src="./images/visual_cup1_text.png" alt="오트밀 라떼" class="cup1 text">
<img src="./images/visual_cup2.png" alt="new STARBUCKS CARAMEL CRUMBLE MOCHA" class="cup2 image" />
<img src="./images/visual_cup2_text.png" alt="스타벅스 카라멜 크럼블 모카" class="cup2 text" />
<img src="./images/visual_spoon.png" alt="Spoon" class="spoon" />
</div>
</section>
/* common */
.btn {
width: 130px;
padding: 10px;
border: 2px solid #333;
border-radius: 4px;
color: #333;
font-size: 16px;
font-weight: 700;
text-align: center;
cursor: pointer;
box-sizing: border-box;
display: block;
transition: .4s;
}
.btn:hover{
background-color: #333;
color: #fff;
}
.btn.btn--reverse {
background-color: : #333;
color: #fff;
}
.btn.btn.btn--reverse:hover {
background-color: transparent;
color: #333;
}
.btn.btn--brown{
color: #592B18;
border-color: #592B18;
}
.btn.btn--brown:hover{
color: #fff;
background-color: #592B18;
}
.btn.btn--gold {
color: #D9AA8A;
border-color: #D9AA8A;
}
.btn.btn--gold:hover {
color: #fff;
background-color: #D9AA8A;
}
.btn.btn--white {
color: #fff;
border-color: #fff;
}
.btn.btn--white:hover {
color: #333;
background-color: #FFF;
}
/* VISUAL */
.visual {
margin-top: 120px;
background-image: url("../images/visual_bg.jpg");
background-position: center;
}
.visual .inner {
height: 646px;
}
.visual .title {
position: absolute;
top: 88px;
left: -10px;
}
.visual .title .btn {
position: absolute;
top: 259px;
left: 173px;
}
.visual .cup1.image {
position: absolute;
bottom: 0;
right: -47px;
}
.visual .cup1.text {
position: absolute;
top: 38px;
right: 171px;
}
.visual .cup2.image {
position: absolute;
bottom: 0px;
right: 162px;
}
.visual .cup2.text {
position: absolute;
top: 321px;
right: 416px;
}
.visual .spoon {
position: absolute;
bottom: 0;
left: 275px;
}