<h1></h1>
<div class="buttons">
<button class="neumorphic active">
<i class="fa-light fa-fire"></i>
<span>25 лет работы</span>
</button>
<button class="neumorphic">
<i class="fa-light fa-dna"></i>
<span>425000 вылеченных пациентов</span>
</button>
<button class="neumorphic">
<i class="fa-light fa-chart-mixed"></i>
<span>250 врачей</span>
</button>
<button class="neumorphic">
<i class="fa-light fa-atom"></i>
<span>2 отделения</span>
</button>
<!-- <button class="neumorphic"> -->
<!-- <i class="fa-light fa-seedling"></i> -->
<!-- <span>Button 5</span> -->
<!-- </button> -->
<!-- <button class="neumorphic">
<i class="fa-light fa-disease"></i>
<span>Button 6</span>
</button> -->
</div>
@import url('https://pro.fontawesome.com/releases/v6.0.0-beta1/css/all.css');
button.neumorphic {
container-type: inline-size;
aspect-ratio: 1/1;
border: 0.5rem solid transparent;
border-radius: 1rem;
color: hsl(0 0% 10%);
background: white;
display: grid;
place-content: center;
gap: 1rem;
--shadow:
-.5rem -.5rem 1rem hsl(0 0% 100% / .75),
.5rem .5rem 1rem hsl(0 0% 50% / .5);
box-shadow: var(--shadow);
outline: none;
transition: all 0.1s;
&:hover, &:focus-visible {
color: hsl(10 80% 50%);
scale: 1.1
}
&:active, &.active{
box-shadow:
var(--shadow),
inset .5rem .5rem 1rem hsl(0 0% 50% / .5),
inset -.5rem -.5rem 1rem hsl(0 0% 100% / .75);
color: hsl(10 80% 50%);
> i { font-size: 28cqi};
> span { font-size: 13cqi};
}
>i {
font-size: 31cqi;
}
> span {
font-family: system-ui, sans-serif;
font-size: 16cqi;
}
}
body {
background-color: #BD3136;
padding: 2rem;
}
h1 {
text-align: center;
color: hsl(0 0% 10%);
font-family: system-ui, sans-serif;
font-size: 3rem;
}
.buttons {
display: grid;
width: min(75rem, 100%);
margin-inline: auto;
grid-template-columns: repeat(auto-fit, minmax(min(8rem, 100%), 1fr));
gap: 2rem;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.