リワーズ
12149 ワード
背景のある画像に後続部分を施す
ボタン既存のグローバルボタンスタイルを使用
コード#コード#
HTML
<section class="rewards">
<div class="bg-left"></div>
<div class="bg-right"></div>
<div class="inner">
<div class="btn-group">
<div class="btn btn--reverse sign-up">회원가입</div>
<div class="btn sign-in">로그인</div>
<div class="btn gift">e-Gift 선물하기</div>
</div>
</div>
</section>
詳細(CSS)
.rewards {
position: relative;
}
.rewards .bg-left {
width: 50%;
height: 100%;
background-color: #272727;
position: absolute;
top: 0;
left: 0;
}
.rewards .bg-right {
width: 50%;
height: 100%;
background-color: #d5c798;
position: absolute;
top: 0;
right: 0;
}
.rewards .inner {
background-image: url('../images/rewards.jpg');
height: 241px;
}
.rewards .btn-group {
position: absolute;
bottom: 24px;
right: 0;
width: 250px;
display: flex;
flex-wrap: wrap;
}
.rewards .btn-group .sign-up {
margin-right: 10px;
}
.rewards .btn-group .sign-in {
width: 110px;
}
.rewards .btn-group .gift {
margin-top: 10px;
flex-grow: 1;
}
CSS(グローバルボタン)
.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--reverse:hover {
background-color: transparent;
color: #333;
}
Reference
この問題について(リワーズ), 我々は、より多くの情報をここで見つけました https://velog.io/@rkde8938/유튜브-영상-배경-리워즈テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol