Estoy tratando de poner un signo "+" en un botón que alcance todos los bordes. Este es un ejemplo mínimo, desde un portátil Jupyter, primero un estilo:

%%html
<style>
.button_style{
    font-size:155px;
    color: black;
}
</style>

Y el botón en sí:

import ipywidgets as ipyw
button = ipyw.Button(description='+', style={'button_color':'blue'},    
                     layout=ipyw.Layout(width='80px', height='80px'))
button.add_class("button_style")

Como puede ver, lo que intenté fue hacer que el tamaño de fuente sea lo suficientemente grande como para alcanzar los bordes de los botones. Pero el problema es que el texto no está alineado con la mitad del botón:

enter image description here

He jugado con opciones como text-align, left-padding, left-margin, etc., pero todos afectan todo el botón, es decir, traducen o deforman todo el cuadrado azul, en lugar de solo el texto dentro de eso.

¿Hay alguna forma de hacer esto? Idealmente, sería capaz de cambiar el centro de la cruz, pero siempre lo hubiera llegado a todos los bordes, y sin hacer que la cruz sea super grasa. Pero menos que las soluciones ideales también son bienvenidas.

Actualización:

Así que el resultado que estoy buscando es esto:

enter image description here

Donde el centro e idealmente también se puede configurar el grosor de las líneas. No importa si el resultado se logra con un '+', siempre que el botón se vea así y el color de fondo aún se puede cambiar con style={'button_color': ..}.

3
Jansen 29 may. 2021 a las 11:50

2 respuestas

La mejor respuesta

Como se mencionó @johannchopin, esto se puede hacer con los pseudoelementos. Sugiero una solución similar a la suya, pero sin el DIV interno .custom-plus. Es mejor porque le permitirá usar el ipywidgets como está y simplemente agregue el estilo.

Esto le permitirá usar el botón desde ipywidgets como este:

Estilo

%%html
<style>
.button_style {
  --size: 80px;
  --line-color: black;
  --line-color-horizontal: var(--line-color);
  --line-color-vertical: var(--line-color);
  --line-stroke: calc(0.125 * var(--size));
  --line-stroke-horizontal: var(--line-stroke);
  --line-stroke-vertical: var(--line-stroke);
  --line-distance: calc(0.2 * var(--size));
  --line-distance-right: var(--line-distance);
  --line-distance-bottom: var(--line-distance);
  --line-hover: lightblue;
  --background: blue;
  --background-hover: var(--background);
  color: black;
  padding: 0;
  background: var(--background);
  width: var(--size);
  height: var(--size);
  position: relative;
  border: none;
  cursor: pointer;
}

.button_style:hover {
  background: var(--background-hover);
}

.button_style:hover::before, .button_style:hover::after {
  background: var(--line-hover);
}

.button_style::before, .button_style::after {
  position: absolute;
  content: "";
  transition: background 250ms;
}

.button_style::before {
  left: 0;
  bottom: var(--line-distance-bottom);
  width: 100%;
  height: var(--line-stroke-horizontal);
  background: var(--line-color-horizontal);
}

.button_style::after {
  right: var(--line-distance-right);
  top: 0;
  height: 100%;
  width: var(--line-stroke-vertical);
  background: var(--line-color-vertical);
}
</style>

Definición

import ipywidgets as ipyw
button = ipyw.Button(description='+', style={'--size':'80px', '--background': 'blue' })
button.add_class("button_style")

Probablemente también podría eliminar la opción de diseño para definir el tamaño del botón, ya que es opcional y ya establecemos el tamaño utilizando las variables CSS ({--size). Además, utilizando las variables CSS, podemos configurar el color de fondo o incluso cambiar de color en el flujo (consulte Mi fragmento para un ejemplo).

.button_style {
  --size: 80px;
  --line-color: black;
  --line-color-horizontal: var(--line-color);
  --line-color-vertical: var(--line-color);
  --line-stroke: calc(0.125 * var(--size));
  --line-stroke-horizontal: var(--line-stroke);
  --line-stroke-vertical: var(--line-stroke);
  --line-distance: calc(0.2 * var(--size));
  --line-distance-right: var(--line-distance);
  --line-distance-bottom: var(--line-distance);
  --line-hover: lightblue;
  --background: blue;
  --background-hover: var(--background);
  color: black;
  padding: 0;
  background: var(--background);
  width: var(--size);
  height: var(--size);
  position: relative;
  border: none;
  cursor: pointer;
}

.button_style:hover {
  background: var(--background-hover);
}

.button_style:hover::before,
.button_style:hover::after {
  background: var(--line-hover);
}

.button_style::before,
.button_style::after {
  position: absolute;
  content: "";
  transition: background 250ms;
}

.button_style::before {
  left: 0;
  bottom: var(--line-distance-bottom);
  width: 100%;
  height: var(--line-stroke-horizontal);
  background: var(--line-color-horizontal);
}

.button_style::after {
  right: var(--line-distance-right);
  top: 0;
  height: 100%;
  width: var(--line-stroke-vertical);
  background: var(--line-color-vertical);
}
<button class="button_style"></button>

<button class="button_style" style="--line-distance: 35px; --background: purple; --line-hover: white"></button>

<button class="button_style" style="--line-distance-bottom: 10px; --line-distance-right: 65px; --background: hsl(348, 100%, 61%); --line-color: hsl(48, 100%, 67%); --line-hover: white"></button>

<button class="button_style" style="--line-distance-bottom: 20px; --line-distance-right: 20px; --background: orange; --line-stroke-horizontal: 25px; --line-hover: orange; --background-hover: black"></button>

<div style="margin: 1em 0">
  <button class="button_style" style="--size: 40px"></button>
</div>
6
Thatkookooguy 31 may. 2021 a las 16:53

Le recomendaría que cree estos 2 bares usando ::before y ::after Elementos en CSS puro:

.button_style::before {
  position: absolute;
  left: 0;
  bottom: 15px;
  content: "";
  width: 100%;
  height: 10px;
  background: black;
}

.button_style::after {
  position: absolute;
  top: 0;
  right: 15px;
  content: "";
  height: 100%;
  width: 10px;
  background: black;
}

El resultado final se ve como este:

.button_style {
  position: relative;
  font-size: 155px;
  color: black;
  line-height: 0;
  padding: 0;
  background: blue;
  width: 80px;
  height: 80px;
}

.button_style::before {
  position: absolute;
  left: 0;
  bottom: 15px;
  content: "";
  width: 100%;
  height: 10px;
  background: black;
}

.button_style::after {
  position: absolute;
  top: 0;
  right: 15px;
  content: "";
  height: 100%;
  width: 10px;
  background: black;
}
<button class="button_style"></button>

Eche un vistazo a la jsfiddle.

3
johannchopin 31 may. 2021 a las 12:57