Свободное общение | Зацените кнопку
derristy 
makasik , с чего вы решили что обосрался? Кнопка нарисовал именно я с нуля
Sovet
wape , Ты что этим хочешь доказать? Да есть похожие кнопки,и я решил подобное нарисовать.Может тебе дать psd чтоб ты понял?
мы разве за одним столом сидели ? с какого вы мне тыкаете
что у вас так подгорело уважаемый ? я просто скинул что почти такая кнопка есть которая схожа на 80%
________
посл. ред. 27.02.2020 в 23:11; всего 1 раз(а); by wape
tucha_32 что у вас так подгорело уважаемый ? я просто скинул что почти такая кнопка есть которая схожа на 80%
________
посл. ред. 27.02.2020 в 23:11; всего 1 раз(а); by wape
wape , Конечно есть, не отрицаю. В интернете тысячами подобные кнопки
в том то и дело что ценить паблик) ну такое себе ничем по сути не отличается
чуть игра с цветами и сеточка с ромбиками вот и все отличия
________
посл. ред. 27.02.2020 в 23:15; всего 1 раз(а); by wape
чуть игра с цветами и сеточка с ромбиками вот и все отличия
________
посл. ред. 27.02.2020 в 23:15; всего 1 раз(а); by wape
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<style>
body {
background: #222;
min-height: 100vh;
margin: 0;
flex-direction: column
}
body, .button, .layer1, .layer2, .layer3, .symbol {
display: flex;
align-items: center;
justify-content: center
}
.layer1, .layer2, .layer3, .circle, .opacity {
border-radius: 100%
}
.layer1 {
background: linear-gradient(#fff 25%, #000);
width: 300px;
height: 300px;
box-shadow: 0 5px 5px rgba(0, 0, 0, .4)
}
.layer2 {
background: linear-gradient(#000 25%, #fff);
width: 275px;
height: 275px
}
.layer3 {
background: orange;
width: 265px;
height: 265px;
box-shadow: inset 0 0 0 2px #000, inset 0 0 20px 25px rgba(0, 0, 0, .5);
flex-direction: column;
overflow: hidden
}
.symbol {
width: 150px;
height: 150px
}
.circle {
width: 100px;
height: 100px;
box-shadow: inset 0 0 0 15px rgba(0, 0, 0, .5)
}
.bline, .line {
width: 15px;
height: 50px
}
.bline {
background: orange;
box-shadow: 0 0 0 10px orange;
margin: -15px auto 0
}
.line {
background: rgba(0, 0, 0, .5);
border-radius: 50px
}
.title {
font: bolder 4em/2em Arial;
text-transform: uppercase;
text-shadow: 0 2px rgba(0, 0, 0, .3);
color: #333
}
</style>
</head>
<body>
<div class="button">
<div class="layer1">
<div class="layer2">
<div class="layer3">
<div class="symbol">
<div class="circle">
<div class="bline">
<div class="line"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="title">Bymas</div>
</body>
</html>
Severus , + но как видите автор не осилить css
Severus (28.02.2020 в 04:06)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<style>
body {
background: #222;
min-height: 100vh;
margin: 0;
flex-direction: column
}
body, .button, .layer1, .layer2, .layer3, .symbol {
display: flex;
align-items: center;
justify-content: center
}
.layer1, .layer2, .layer3, .circle, .opacity {
border-radius: 100%
}
.layer1 {
background: linear-gradient(#fff 25%, #000);
width: 300px;
height: 300px;
box-shadow: 0 5px 5px rgba(0, 0, 0, .4)
}
.layer2 {
background: linear-gradient(#000 25%, #fff);
width: 275px;
height: 275px
}
.layer3 {
background: orange;
width: 265px;
height: 265px;
box-shadow: inset 0 0 0 2px #000, inset 0 0 20px 25px rgba(0, 0, 0, .5);
flex-direction: column;
overflow: hidden
}
.symbol {
width: 150px;
height: 150px
}
.circle {
width: 100px;
height: 100px;
box-shadow: inset 0 0 0 15px rgba(0, 0, 0, .5)
}
.bline, .line {
width: 15px;
height: 50px
}
.bline {
background: orange;
box-shadow: 0 0 0 10px orange;
margin: -15px auto 0
}
.line {
background: rgba(0, 0, 0, .5);
border-radius: 50px
}
.title {
font: bolder 4em/2em Arial;
text-transform: uppercase;
text-shadow: 0 2px rgba(0, 0, 0, .3);
color: #333
}
</style>
</head>
<body>
<div class="button">
<div class="layer1">
<div class="layer2">
<div class="layer3">
<div class="symbol">
<div class="circle">
<div class="bline">
<div class="line"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="title">Bymas</div>
</body>
</html> Положил на лопатки)
