Как можно сверстать такую сложную кнопку?
2 ответа
Есть подозрение, что кнопка не должна быть статичной, поэтому добавил анимацию блика, которую можно отключить при необходимости (комментарии в коде). Вариант на чистом CSS:
body { margin: 0; background: #000; display: flex; justify-content: center; align-items: center; height: 100vh; }
.btn {
position: relative;
display: grid;
place-items: center;
height: 276px;
width: 729px;
overflow: hidden;
font: bold 100px "Comic Sans MS";
border-width: 1px;
border-style: solid;
border-image: linear-gradient(to bottom, #252525, #868690) 1 100%;
border-top-width: 0px;
background: #868690;
box-shadow: inset 0 0 0 13px #0e0e0e;
}
.btn>span {
position: absolute;
z-index: 1;
transform: scaley(1.27) translate(7px, -7px);
border: none;
color: #fbfbfb;
text-shadow: 6px 1px 5px black;
}
.btn::before {
content: "";
position: absolute;
right: 0;
height: 100%;
width: 50%;
box-sizing: border-box;
border: 13px solid #8f8f8f;
border-left: none;
background: linear-gradient(90deg, #434449, #000106);
box-shadow: 0 0 20px black;
}
.btn::after {
content: "";
position: absolute;
z-index: 2;
height: 150%;
width: 200%;
background: linear-gradient( 55deg, transparent 46%, rgba(255, 255, 255, 1) 50%, transparent 54%);
filter: blur(5px);
/* Для анимации блика */
margin-left: -170%;
/* Для статичного блика
margin-left: -18%; */
}
/* Для анимации блика */
.btn:hover::after { animation: blink 1.1s ease-in-out forwards; }
@keyframes blink { to { margin-left: 170%; } }
<div class="btn"><span>BARPHOTO</span></div>
Для векторной графики это не проблема … просто открыть Corel Draw и нарисовать а после этого все стили вынести в отдельный файл...например в style.css, этот пример я проверил в Microsoft Edge и в IE11
Автору очевидно надо было с hover эффектом … не ясна суть вопроса была … отредактировал
body {
background: #444;
}
.item {
margin: 100px auto;
width: 200px;
position: relative;
overflow: hidden;
}
.item:after {
position: absolute;
top: -130px;
left: -80px;
content: "";
display: block;
width: 10px;
height: 300px;
background: linear-gradient(#fff 40%, #fafafa, #fff 40%);
transform: rotate(-45deg);
transition: 0.48s cubic-bezier(0, 0.39, .72, 0.1);
box-shadow: 0 -4px 20px #fff;
}
.item:hover:after {
top: -150px;
left: 450px;
}
#fill {
fill: url(#linearGradient1);
}
#left_border {
fill: none;
stroke: #000;
stroke-width: 6;
}
#right_border {
fill: none;
stroke: #666;
stroke-width: 6;
}
#txt {
fill: #fff;
font-size: 24px;
text-transform: uppercase;
font-family: sans-serif;
font-weight: 700;
}
<div class="item">
<svg viewBox="0 0 200 60">
<defs>
<linearGradient id="linearGradient1">
<stop offset="45%" stop-color='#666' stop-opacity='50%' />
<stop offset="55%" stop-color='#000'stop-opacity='50%'/>
</linearGradient>
</defs>
<a href="http://google.com" target="_blank">
<rect width="100%" height="100%" id="fill" />
<path d="M100,0 0,0 0,60 100,60" id="left_border" />
<path d="M100,0 200,0 200,60 100,60" id="right_border" />
<text x="50" y="40" id="txt">bigtext</text>
</a>
</svg>
</div>
<img src="картинка-кнопки.png">
– andreymal 18 мар '20 в 23:47