187 lines
5.1 KiB
HTML
187 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>test</title>
|
|
<style>
|
|
.basic_single_btn {
|
|
position: relative;
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 56px;
|
|
margin: 0;
|
|
padding: 0 30px;
|
|
color: #ffffff;
|
|
filter:url(#round);
|
|
transition: 0.3s all;
|
|
}
|
|
|
|
.basic_single_btn::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: -2;
|
|
display: block;
|
|
width: 100%;
|
|
height: 0;
|
|
padding-top:56px;
|
|
background-color:#05141F;
|
|
clip-path: polygon(24px 0%, 100% 0, 100% calc(100% - 18px), calc(100% - 24px) 100%, 0 100%, 0% 18px);
|
|
transition: 0.3s all;
|
|
}
|
|
|
|
.basic_single_btn:hover {
|
|
color: #05141F;
|
|
}
|
|
.basic_single_btn:hover::before {
|
|
background-color:#CDD0D2;
|
|
}
|
|
|
|
|
|
.border_single_btn {
|
|
color: #05141F;
|
|
}
|
|
.border_single_btn::before {
|
|
background-color:#9BA1A5;
|
|
}
|
|
.border_single_btn::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 1px;
|
|
left: 1px;
|
|
z-index: -1;
|
|
display: block;
|
|
width: calc(100% - 2px);
|
|
height: 0;
|
|
padding-top:54px;
|
|
background-color:#fff;
|
|
clip-path: polygon(24px 0%, 100% 0, 100% calc(100% - 18px), calc(100% - 24px) 100%, 0 100%, 0% 18px);
|
|
filter:url(#round);
|
|
transition: 0.3s all;
|
|
}
|
|
.border_single_btn:hover::before {
|
|
background-color:#F3C300;
|
|
}
|
|
.border_single_btn:hover::after {
|
|
opacity: 0;
|
|
}
|
|
|
|
|
|
|
|
|
|
.basic_pair_btn {
|
|
position: relative;
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 56px;
|
|
margin: 0;
|
|
padding: 0 30px;
|
|
color: #ffffff;
|
|
filter:url(#round);
|
|
transition: 0.3s all;
|
|
}
|
|
|
|
.basic_pair_btn::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: -2;
|
|
display: block;
|
|
width: 100%;
|
|
height: 0;
|
|
padding-top:56px;
|
|
background-color:#05141F;
|
|
clip-path: polygon(0% 0%, 100% 0, 100% calc(100% - 18px), calc(100% - 24px) 100%, 0 100%);
|
|
transition: 0.3s all;
|
|
}
|
|
|
|
.basic_pair_btn:hover {
|
|
color: #05141F;
|
|
}
|
|
.basic_pair_btn:hover::before {
|
|
background-color:#CDD0D2;
|
|
}
|
|
|
|
|
|
.border_pair_btn {
|
|
|
|
color: #05141F;
|
|
}
|
|
.border_pair_btn::before {
|
|
background-color:#9BA1A5;
|
|
clip-path: polygon(24px 0%, 100% 0, 100% 100%, 0 100%, 0% 18px);
|
|
|
|
}
|
|
.border_pair_btn::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 1px;
|
|
left: 1px;
|
|
z-index: -1;
|
|
display: block;
|
|
width: calc(100% - 2px);
|
|
height: 0;
|
|
padding-top:54px;
|
|
background-color:#fff;
|
|
clip-path: polygon(24px 0%, 100% 0, 100% 100%, 0 100%, 0% 18px);
|
|
filter:url(#round);
|
|
transition: 0.3s all;
|
|
}
|
|
.border_pair_btn:hover::before {
|
|
background-color:#F3C300;
|
|
}
|
|
.border_pair_btn:hover::after {
|
|
opacity: 0;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="basic_single_btn border_single_btn">
|
|
안녕하세요. 테스트입니다. sdf
|
|
</div>
|
|
<div class="basic_single_btn">
|
|
안녕하세요. 테스트입니다. sdf
|
|
</div>
|
|
|
|
<div style="height: 40px;"></div>
|
|
|
|
|
|
<div class="basic_pair_btn border_pair_btn">
|
|
이게 맞는지도 모르겠다.
|
|
</div>
|
|
|
|
<div class="basic_pair_btn">
|
|
어렵다 뿜뿜
|
|
</div>
|
|
|
|
|
|
|
|
<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1" >
|
|
<defs>
|
|
<filter id="round" >
|
|
<feGaussianBlur in="SourceGraphic" stdDeviation="2" result="blur" />
|
|
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo"shape-rendering="geometricPrecision" />
|
|
<feComposite in="SourceGraphic" in2="goo" operator="atop"/>
|
|
</filter>
|
|
</defs>
|
|
</svg>
|
|
|
|
<div>
|
|
<button onclick="alert('클릭이 되지요?');">
|
|
클릭해 보시라
|
|
</button>
|
|
</div>
|
|
<div>
|
|
<button onclick="alert('클릭이 되지요?');" disabled>
|
|
클릭해 보시라
|
|
</button>
|
|
</div>
|
|
</body>
|
|
</html> |