Как сделать на чистом css?
.button {
display: inline-block;
position: relative;
margin: 2rem;
padding: 0 2rem;
line-height: 2rem;
font-family: 'Montserrat', sans-serif;
color: #FFF;
background:
linear-gradient(to right, #41D3BD, #791E94),
linear-gradient(to bottom, #791E94, #FE9920),
linear-gradient(-45deg, transparent, transparent 40%, #FE9920 45%, #FE9920 55%, transparent 60%, transparent),
linear-gradient(to left, #FE9920, #FCFF4B),
linear-gradient(to top, #FCFF4B, #41D3BD),
linear-gradient(-45deg, transparent, transparent 40%, #41D3BD 45%, #41D3BD 55%, transparent 60%, transparent);
background-repeat: no-repeat;
background-position: top right, top right, bottom right, bottom left, bottom left, top left;
background-size:
calc(100% - 10px) 2px,
2px calc(100% - 10px),
10px 10px,
calc(100% - 10px) 2px,
2px calc(100% - 10px),
10px 10px;
&::before {
content: '';
display: inline-block;
height: 100%;
width: 100%;
position: absolute;
bottom: -4px;
right: -4px;
background:
linear-gradient(to bottom, #791E94, #FE9920),
linear-gradient(-45deg, transparent, transparent 45%, #FE9920 50%, #FE9920 55%, transparent 60%, transparent),
linear-gradient(to left, #FE9920, #FCFF4B);
background-repeat: no-repeat;
background-position: top right, bottom right, bottom left;
background-size:
2px calc(100% - 12px),
12px 12px,
calc(100% - 12px) 2px;
}
}
background:
linear-gradient(135deg, transparent, rgba(255,255,255,.1)),
linear-gradient(to top, #999, transparent),
linear-gradient(to left, #999, transparent);
background-repeat: no-repeat;
background-position: top left, top right, bottom right;
background-size: 100% 100%, 1px 100%, 100% 1px;
span {
background: linear-gradient(to right, #ccc 0%, #ccc 50%, #fff 50%, #fff);
background-size: 200% 100%;
background-position: 100% 0;
transition: background-position .5s cubic-bezier(.56,.08,.42,.7);
}
span:hover {
background-position: 0 0;
}
Это по какой-то системе делается или дизайнер просто так по красоте на глазок подбирает отступы?
Надо ли именно такие отступы соблюдать или можно, например, просто в бутстраповский контейнер запихнуть секцию и не париться?
Возможно я чего-то не понимаю в реальной вёрстке, раз такой подход хвалёной адаптивности - подгонки сайта ко всему - от умных часов до UltraHD-телевизоров - на практике слабо встречается.
Что нужно поправить?