Estilo de botón CSS de alta frecuencia
Botones rectangulares y redondeados.
Normalmente, encontramos dos tipos de botones: rectangulares y redondeados:
Son muy simples, ancho y alto y esquinas redondeadas y color de fondo.
<div class='btn rect'>rect</div>
<div class='btn circle'>circle</div>
.btn {
margin: 8px auto;
flex-shrink: 0;
width: 160px;
height: 64px;
}
.rect {
background: #f6ed8d;
}
.circle {
border-radius: 64px;
background: #7de3c8;
}
trapezoide y paralelogramo
Además, en función de las deformaciones del rectángulo, suelen aparecer botones trapezoidales y de paralelogramo .
Para realizarlos, puedes usar principalmente transform, pero cabe señalar que después de usarlo transform, el texto en la etiqueta también se deformará de la misma manera, por lo que generalmente usamos el pseudoelemento del elemento para realizar la forma, por lo que que no afectará el texto del botón.
Paralelogramo
Solo use transform: skewX(), preste atención a lo anterior, use el pseudoelemento del elemento para realizar el paralelogramo, para no afectar el texto interno.
<div class='btn parallelogram'>Parallelogram</div>
.parallelogram {
position: relative;
width: 160px;
height: 64px;
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: #03f463;
transform: skewX(15deg);
}
}
Si no desea utilizar pseudoelementos, también transform: skewX()son posibles paralelogramos que utilicen gradientes.
Probablemente algo como esto:
{
background: linear-gradient(45deg, transparent 22%, #04e6fb 22%, #9006fb 78%, transparent 0);
}trapezoidal
El trapezoide es un poco más complicado que el paralelogramo y usa más perspective, de hecho, usa una cierta transformación 3D. El principio es un rectángulo que gira alrededor del eje X.
Simplemente use perspectivey transform: rotateX(), por supuesto, se pueden escribir juntos:
<div class='btn trapezoid'>Trapezoid</div>
.parallelogram {
position: relative;
width: 160px;
height: 64px;
&::after {
content:"";
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
transform: perspective(40px) rotateX(10deg);
transform-origin: bottom;
background: #ff9800;
}
}
Cortar esquinas: fondo de color sólido y fondo de color degradado
Lo siguiente son los gráficos de corte de esquinas. El método más común es utilizar gradientes linear-gradient para realizar dichos gráficos.
.notching {
background: linear-gradient(135deg, transparent 10px, #ff1493 0);
background-repeat: no-repeat;
}
En base a esto, solo necesitamos usar múltiples gradientes para lograr 4 de estos gráficos y usar el background-position posicionamiento en las cuatro esquinas:
<div class="notching">notching</div>
.notching {
background:
linear-gradient(135deg, transparent 10px, #ff1493 0) top left,
linear-gradient(-135deg, transparent 10px, #ff1493 0) top right,
linear-gradient(-45deg, transparent 10px, #ff1493 0) bottom right,
linear-gradient(45deg, transparent 10px, #ff1493 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}
Utilice clip-path para realizar los gráficos de esquinas recortadas del fondo degradado
Por supuesto, hay un problema con esta técnica: cuando se requiere que el color de fondo sea un degradado, este método es torpe.
Afortunadamente, tenemos otra forma, usar para clip-pathrecortar un gráfico de esquina, de modo que el color de fondo pueda ser cualquier color personalizado, ya sea un degradado o un color sólido:
<div class="clip-notching">notching</div>
.clip-notching {
background: linear-gradient(
45deg,
#f9d9e7,
#ff1493
);
clip-path: polygon(
15px 0,
calc(100% - 15px) 0,
100% 15px,
100% calc(100% - 15px),
calc(100% - 15px) 100%,
15px 100%,
0 calc(100% - 15px),
0 15px
);
}
clip-path: polygon() Simplemente implemente un fondo degradado y luego el núcleo es recortar la forma que queremos (una forma de 8 lados) según los gráficos del rectángulo degradado :
Por supuesto, el código anterior es muy fácil de pensar en los siguientes 6 gon, que se clip-path pueden obtener fácilmente usando gradiente y suma:
botón de flecha
El siguiente es el botón de flecha, observe cuidadosamente el botón de corte de esquina de arriba, cuando se cortan suficientes esquinas en ambos lados, adquiere forma de flecha.
Podemos implementar un botón de una sola flecha con doble degradado:
<div class="arrow">arrow</div>
&.arrow {
background: linear-gradient(
-135deg,
transparent 22px,
#04e6fb 22px,
#65ff9a 100%
)
top right,
linear-gradient(
-45deg,
transparent 22px,
#04e6fb 22px,
#65ff9a 100%
)
bottom right;
background-size: 100% 50%;
background-repeat: no-repeat;
}
Sale una flecha:
Se obtiene combinando los bloques de degradado superior e inferior, y puedes entenderlo inmediatamente cambiando el color:
¿Qué pasa si tiene forma de flecha?
Del mismo modo, también es una superposición de dos degradados, el color del degradado es transparente --> color A --> color B --> transparente . Por supuesto, lo mismo también se puede utilizar aquí clip-path:
Aquí está clip-pathla solución para:
{
background: linear-gradient(45deg, #04e6fb, #65ff9a);
clip-path: polygon(
0 0,
30px 50%,
0 100%,
calc(100% - 30px) 100%,
100% 50%,
calc(100% - 30px) 0
);
}
Filete Inscrito
La forma del botón a continuación aparece principalmente en cupones. La solución más común es usar degradados. Por supuesto, a diferencia del corte de esquinas, aquí se usan degradados radiales.
Primero, mire este ejemplo simple:
div {
background-image: radial-gradient(circle at 100% 100%, transparent 0, transparent 12px, #2179f5 12px);
}Se puede obtener un gráfico de este tipo:
background-sizeEntonces, simplemente implemente 4 de estos gráficos en 4 esquinas bajo control :
<div class="inset-circle">inset-circle</div>
&.inset-circle {
background-size: 70% 70%;
background-image: radial-gradient(
circle at 100% 100%,
transparent 0,
transparent 12px,
#2179f5 13px
),
radial-gradient(
circle at 0 0,
transparent 0,
transparent 12px,
#2179f5 13px
),
radial-gradient(
circle at 100% 0,
transparent 0,
transparent 12px,
#2179f5 13px
),
radial-gradient(
circle at 0 100%,
transparent 0,
transparent 12px,
#2179f5 13px
);
background-repeat: no-repeat;
background-position: right bottom, left top, right top, left bottom;
}
Realice el botón redondeado con la inscripción en degradado con la ayuda de la máscara
¿Qué pasa si el color de fondo requiere un degradado?
Suponiendo que tenemos un patrón de fondo rectangular, solo necesitamos usarlo para maskimplementar una capa de enmascaramiento y usar masklas características de para cubrir las 4 esquinas.
maskEl código de es muy similar al código de corte de esquinas redondeadas mencionado anteriormente, y se puede obtener un botón de esquinas redondeadas con inscripción degradada con una simple modificación:
<div class="mask-inset-circle">inset-circle</div>
.mask-inset-circle {
background: linear-gradient(45deg, #2179f5, #e91e63);
mask: radial-gradient(
circle at 100% 100%,
transparent 0,
transparent 12px,
#2179f5 13px
),
radial-gradient(
circle at 0 0,
transparent 0,
transparent 12px,
#2179f5 13px
),
radial-gradient(
circle at 100% 0,
transparent 0,
transparent 12px,
#2179f5 13px
),
radial-gradient(
circle at 0 100%,
transparent 0,
transparent 12px,
#2179f5 13px
);
mask-repeat: no-repeat;
mask-position: right bottom, left top, right top, left bottom;
mask-size: 70% 70%;
}
De esta forma obtenemos un gráfico de este tipo:
Por supuesto, para comprender el código anterior, primero debe comprender maskel principio de las propiedades CSS. Si aún no está familiarizado con él, puede consultar este artículo mío:
rectángulo irregular redondeado
La forma del botón a continuación también es la que se preguntó más recientemente. Primero echemos un vistazo a su forma:
No es fácil nombrarlo, un lado es un ángulo recto regular con esquinas redondeadas y el otro lado es una hipotenusa con esquinas redondeadas.
De hecho, se compone de rectángulo redondeado + paralelogramo redondeado :
Entonces, con la ayuda de dos pseudoelementos, se pueden implementar fácilmente:
<div class="skew">Skew</div>
.skew {
position: relative;
width: 120px;
&::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 10px;
background: orange;
transform: skewX(15deg);
}
&::before {
content: "";
position: absolute;
top: 0;
right: -13px;
width: 100px;
height: 64px;
border-radius: 10px;
background: orange;
}
}
Dado que un pseudoelemento se superpone al otro, se usa un degradado para uno de ellos y un color sólido para el otro, y los colores se pueden conectar perfectamente entre sí, de modo que se realiza el gráfico del color degradado:
botón de bala
La siguiente forma de botón es común en la página de pestañas, similar al salto de página de Chrome:
Desmontemos la forma de este botón, aquí en realidad hay una superposición de 3 piezas:
Simplemente descubre cómo lograr el triángulo curvo en ambos lados. Aquí todavía usamos gradiente-- gradiente radial . De hecho, es así: como se muestra en la figura siguiente, solo necesitamos reemplazar la parte negra con transparencia y usar dos pseudoelementos:
El código se muestra a continuación:
<div class="outside-circle">outside-circle</div>
.outside-circle {
position: relative;
background: #e91e63;
border-radius: 10px 10px 0 0;
&::before {
content: "";
position: absolute;
width: 20px;
height: 20px;
left: -20px;
bottom: 0;
background: #000;
background:radial-gradient(circle at 0 0, transparent 20px, #e91e63 21px);
}
&::after {
content: "";
position: absolute;
width: 20px;
height: 20px;
right: -20px;
bottom: 0;
background: #000;
background:radial-gradient(circle at 100% 0, transparent 20px, #e91e63 21px);
}
}
Puedes obtener:
Puede ver el código completo de todos los gráficos anteriores aquí: Demostración de CodePen - Varias formas de botones CSS | Varias formas de botones CSS
borde de doble flujo
clip-path: establece la posición de antes y después
filtro: establecer el color
posición: establecer la posición
animación @keyframes
<div>测试</div>div {
margin: 100px auto;
background: rebeccapurple;
line-height: 30px;
padding: 0 20px;
color: #fff;
border-radius: 5px;
width: 100px;
position: relative;
}
div::after {
animation: clippath 3s infinite linear;
content: "";
border: 2px solid rebeccapurple;
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
}
div::before {
animation: clippath 3s infinite -1.5s linear;
content: "";
border: 2px solid rebeccapurple;
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
}
@keyframes clippath {
0%,
100% {
clip-path: inset(0 0 96% 0);
filter: hue-rotate(0deg);
}
25% {
clip-path: inset(0 96% 0 0);
}
50% {
filter: hue-rotate(360deg);
clip-path: inset(96% 0 0 0);
}
75% {
clip-path: inset(0 0 0 96%);
}
}en conclusión
Según la implementación anterior, no es difícil encontrar que algunos botones ligeramente especiales se logran mediante empalme, venda de los ojos, enmascaramiento y otros métodos.
Y en él:
- Degradados (degradados lineales
linear-gradient, degradados radialesradial-gradient, degradados múltiples) - mascarilla
mask - separar
clip-path - fuera de forma
transform
Juega un papel importante, úsalos con habilidad, podemos manejar fácilmente estos gráficos y podemos afrontar con calma la deformación basada en ellos.
Los gráficos anteriores, junto con él filter: drop-shadow(), básicamente pueden lograr sombras irregulares.
Además, un gráfico más complejo, como se muestra a continuación:
Cortemos la imagen: aunque CSS es bueno, la relación entrada-salida debe considerarse en el uso real.
Resumen de artículos técnicos de CSS Github - iCSS 
https://link.juejin.cn/?target=https%3A%2F%2Fgithub.com%2Fchokcoco%2FiCSS
adelante desde: