Responsive bouton CSS container queries

• container
• @container

Votre navigateur ne supporte pas cette démonstration

<div class="carte-cq">

<div class="cq">

<img src="image.jpg" alt>

<div class="description">

<div class=contenu-des>
<h2>T-shirt</h2>
<select>
<option value="">--Quantité--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class=prix>14.99€</div>
<p>...</p>

<button>

<svg viewBox="0 0 320 173">

<g>
<line x1="278" y1="36" x2="278" y2="124" />
<line x1="322" y1="80" x2="234" y2="80" />
</g>

<g>
<polyline points="44 100 190.95 100 209.44 36 30.77 36 44.48 100" />
<polyline points="185 131 51.44 131 44.78 99.91 24.46 5 0 5" />
<circle cx="68" cy="152" r="16" />
<circle cx="169" cy="152" r="16" />
</g>

</svg>  

<span>Ajouter</span><span>au panier</span>
	
</button>

</div>
</div>
</div>

*,
*::before,
*::after{

box-sizing: border-box

}

.carte-cq {

container: carte /  inline-size;
box-shadow:0 0 10px rgba(0, 0, 0, 0.22);
background:white;
max-width: 800px;
margin:5rem auto;
}
	
.carte-cq img{ 
max-width:100%;
display:block;
align-self: stretch;
object-fit: cover;

	
	}
	
	
.cq {
	
 display: grid;


}

.cq h2 {
	

margin:0;
font-size: clamp(1.5rem, 5cqi, 3rem);
	
}
	
.description {
	
display:grid;
padding: 1rem;
gap:.5rem;
	
  }
	
.contenu-des{
display:flex;
flex-flow:wrap;
justify-content:space-between;
align-items:center;
gap:1rem
	
	} 

	
  .cq button {
background-color:#6753ea;
color:white;
justify-self: end;
font-family: inherit;
min-width:60px;
display:flex;
place-items:center;
justify-content:center;
gap:.25rem;
padding:1rem;
border-radius: 9999px;
border:1px solid #6753ea;
font-size: 1rem;
}

  .cq button svg{height:30px;width:30px;}
	
  .cq button span{display: none}

		
  .cq button svg g line {stroke-width: 20px;stroke:currentcolor;}

  .cq button svg g:last-of-type {
  stroke-width: 10px;
  stroke: currentcolor;
  fill: none;
}
	
	
@container carte (min-width:480px) {
	
	
  .cq {
	  
  grid-template-columns:  1fr 1fr;
 }
	
  .cq button{padding:.25rem 1rem;}
  .cq button span:first-of-type{display:block}
  .cq button span:last-of-type{display:none}
}
	
@container carte (min-width:600px) {
	
	.cq button{background-color: unset;color:black}
	.cq button span:last-of-type{display:block}
	
	}

button:is(:hover,:focus-within){

background-color:#6753ea;
color:white
}