Botones css | Generador de botones css online gratis

It appears the browser you're using is Internet Explorer. Because this browser does not support CSS3, you can't use red-colored settings. In order to be able to use all of the features of CSS3 Button Generator, please download and use a modern browser such as FireFox or Google Chrome. close
TEXTO

Vista previa del color de fondo

PASO 2 :
  Copie este código en su página HTML.



PASO 3 :
  Copie este código en su CSS.

PASO 1 :
  Cambia los parámetros de tu botón.



 
     
    Sombra de la caja   / 
     
    Sombra de texto

     


    Lista de botones css ya creados que te gustarán:

    ¿Qué es el CSS?

    Hojas de estilo en cascada ( CSS ) es un lenguaje de hojas de estilo que se utiliza para describir la presentación de un documento escrito en un lenguaje de marcado como HTML . [1] CSS es una tecnología fundamental de la World Wide Web , junto con HTML y JavaScript . [2] CSS está diseñado para permitir la separación de la presentación y el contenido, incluidos el diseño , los colores y las fuentes . [3] Esta separación puede mejorar la accesibilidad del contenido , proporcionar más flexibilidad y control en la especificación de las características de la presentación, permitir que varias páginas web compartan el formato especificando el CSS relevante en un archivo .css separado que reduce la complejidad y la repetición en el contenido estructural como además de permitir que el archivo .css se almacene en caché para mejorar la velocidad de carga de la página entre las páginas que comparten el archivo y su formato. La separación de formato y contenido también hace que sea factible presentar la misma página de marcado en diferentes estilos para diferentes métodos de representación, como en pantalla, en forma impresa, por voz (a través del navegador o lector de pantalla basado en voz ) y en Braille. dispositivos táctiles. CSS también tiene reglas para el formato alternativo si se accede al contenido en un dispositivo móvil . [4] El nombre en cascada proviene del esquema de prioridad especificado para determinar qué regla de estilo se aplica si más de una regla coincide con un elemento en particular. Este esquema de prioridad en cascada es predecible. Las especificaciones CSS las mantiene el World Wide Web Consortium (W3C). El tipo de medio de Internet (tipo MIME ) text/cssestá registrado para su uso con CSS por RFC 2318 (marzo de 1998). El W3C opera un servicio gratuito de validación de CSS para documentos CSS. [5] Además de HTML, otros lenguajes de marcado admiten el uso de CSS, incluidos XHTML , XML simple , SVG y XUL .

    Sintaxis

    CSS tiene una sintaxis simple y utiliza varias palabras clave en inglés para especificar los nombres de varias propiedades de estilo. Una hoja de estilo consta de una lista de reglas . Cada regla o conjunto de reglas consta de uno o más selectores y un bloque de declaración .

    Selector

    En CSS, los selectores declaran a qué parte del marcado se aplica un estilo al hacer coincidir etiquetas y atributos en el marcado mismo. Los selectores pueden aplicar a lo siguiente: todos los elementos de un tipo específico, por ejemplo, los encabezados de segundo nivel h2 elementos especificados por atributo , en particular: id : un identificador único dentro del documento clase : un identificador que puede anotar varios elementos en un documento elementos dependiendo de cómo se coloquen en relación con otros en el árbol del documento . Las clases y los ID distinguen entre mayúsculas y minúsculas, comienzan con letras y pueden incluir caracteres alfanuméricos, guiones y guiones bajos. Una clase puede aplicarse a cualquier número de instancias de cualquier elemento. Un ID solo puede aplicarse a un solo elemento. Las pseudoclases se utilizan en los selectores de CSS para permitir el formateo basado en información que no está contenida en el árbol del documento. Un ejemplo de una pseudoclase ampliamente utilizada es la que identifica el contenido solo cuando el usuario "apunta" al elemento visible, generalmente manteniendo el cursor del mouse sobre él. Se adjunta a un selector como en o . Una pseudoclase clasifica los elementos del documento, como o , mientras que un pseudoelemento realiza una selección que puede constar de elementos parciales, como o . [6]:hovera:hover#elementid:hover:link:visited::first-line::first-letter Los selectores pueden combinarse de muchas formas para lograr una gran especificidad y flexibilidad. [7] Se pueden unir varios selectores en una lista espaciada para especificar elementos por ubicación, tipo de elemento, id, clase o cualquier combinación de los mismos. El orden de los selectores es importante. Por ejemplo, se aplica a todos los elementos de la clase myClass que están dentro de los elementos div, mientras que se aplica a todos los elementos div que están en los elementos de la clase myClass. div .myClass {color: red;}.myClass div {color: red;}

    Bloque de declaración

    Un bloque de declaración consta de una lista de declaraciones entre llaves. Cada declaración en sí consta de una propiedad , dos puntos ( :) y un valor . Si hay varias declaraciones en un bloque, se ;debe insertar un punto y coma ( ) para separar cada declaración. [9] Las propiedades se especifican en el estándar CSS. Cada propiedad tiene un conjunto de valores posibles. Algunas propiedades pueden afectar a cualquier tipo de elemento y otras se aplican solo a grupos particulares de elementos. [10] [11] Los valores pueden ser palabras clave, como "centro" o "heredar", o valores numéricos, como 200px(200 píxeles), 50vw(50 por ciento del ancho de la ventana gráfica) u 80% (80 por ciento del ancho del elemento principal). Los valores de color se pueden especificar con palabras clave (p. Ej., " "), Valores hexadecimales (p . Ej. , También abreviado como ), valores RGB en una escala de 0 a 255 (p . Ej. ), Valores RGBA que especifican tanto el color como la transparencia alfa (p . Ej. ) O HSL o valores HSLA (por ejemplo , ). [12]red#FF0000#F00rgb(255, 0, 0)rgba(255, 0, 0, 0.8)hsl(000, 100%, 50%)hsla(000, 100%, 50%, 80%)

    Unidades de longitud

    Los valores numéricos distintos de cero que representan medidas lineales deben incluir una unidad de longitud, que es un código alfabético o una abreviatura, como en 200pxo 50vw; o un signo de porcentaje, como en 80%. Algunas unidades - cm( centímetro ); in( pulgada ); mm( milímetro ); pc( pica ); y pt( punto ) - son absolutos , lo que significa que la dimensión renderizada no depende de la estructura de la página; otros - em( em ); ex( ex ) y px( píxel ) - son relativos, lo que significa que factores como el tamaño de fuente de un elemento principal pueden afectar la medida renderizada. Estas ocho unidades fueron una característica de CSS 1 [13] y se mantuvieron en todas las revisiones posteriores. Los valores CSS propuestos y las unidades de nivel del módulo 3, de aprobarse como Recomendación del W3C, proporcionan unidades de longitud otros siete: ch; Q; rem; vh; vmax; vmin; y vw. [14]

    Utilice

    Antes de CSS, casi todos los atributos de presentación de los documentos HTML estaban contenidos en el marcado HTML. Todos los colores de fuente, estilos de fondo, alineaciones de elementos, bordes y tamaños tenían que describirse explícitamente, a menudo repetidamente, dentro del HTML. CSS permite a los autores mover gran parte de esa información a otro archivo, la hoja de estilo, lo que resulta en un HTML considerablemente más simple. Por ejemplo, los títulos ( h1elementos), los subtítulos ( h2), los subtítulos secundarios ( h3), etc., se definen estructuralmente mediante HTML. En forma impresa y en pantalla, la elección de la fuente , el tamaño , el color y el énfasis de estos elementos es una presentación . Antes de CSS, los autores de documentos que querían asignar tales características tipográficas a, digamos, todos los h2encabezados tenían que repetir el marcado de presentación HTML para cada aparición de ese tipo de encabezado. Esto hizo que los documentos fueran más complejos, más grandes, más propensos a errores y difíciles de mantener. CSS permite la separación de la presentación de la estructura. CSS puede definir el color, la fuente, la alineación del texto, el tamaño, los bordes, el espaciado, el diseño y muchas otras características tipográficas, y puede hacerlo de forma independiente para las vistas impresas y en pantalla. CSS también define estilos no visuales, como velocidad de lectura y énfasis para lectores de texto auditivos. El W3C ahora ha desaprobado el uso de todo el marcado HTML de presentación. [15] Por ejemplo, en HTML previo a CSS, un elemento de encabezado definido con texto rojo se escribiría como: < h1 > < font color = "red" > Capítulo 1. Usando CSS, el mismo elemento se puede codificar usando propiedades de estilo en lugar de atributos de presentación HTML: < h1 style = "color: red;" > Capítulo 1. Las ventajas de esto pueden no ser claras de inmediato, pero el poder de CSS se hace más evidente cuando las propiedades de estilo se colocan en un elemento de estilo interno o, mejor aún, en un archivo CSS externo. Por ejemplo, suponga que el documento contiene el elemento de estilo: < estilo > h1 { color : rojo ; } Todos los h1elementos del documento se volverán rojos automáticamente sin necesidad de ningún código explícito. Si el autor más tarde quisiera hacer que los h1elementos fueran azules, esto podría hacerse cambiando el elemento de estilo a: < estilo > h1 { color : azul ; } en lugar de revisar laboriosamente el documento y cambiar el color de cada h1elemento individual . Los estilos también se pueden colocar en un archivo CSS externo, como se describe a continuación, y cargar con una sintaxis similar a: < link href = "ruta / a / archivo.css" rel = "hoja de estilo" tipo = "texto / css" > Esto disocia aún más el estilo del documento HTML y hace posible cambiar el estilo de varios documentos simplemente editando un archivo CSS externo compartido.

    Fuentes

    La información CSS puede obtenerse de varias fuentes. Estas fuentes pueden ser el navegador web, el usuario y el autor. La información del autor puede clasificarse además en en línea, tipo de medio, importancia, especificidad del selector, orden de reglas, herencia y definición de propiedad. La información de estilo CSS puede estar en un documento separado o puede estar incrustada en un documento HTML. Se pueden importar varias hojas de estilo. Se pueden aplicar diferentes estilos según el dispositivo de salida que se utilice; por ejemplo, la versión en pantalla puede ser bastante diferente de la versión impresa, de modo que los autores pueden adaptar la presentación de manera adecuada a cada medio. La hoja de estilo con mayor prioridad controla la visualización del contenido. Las declaraciones que no se establecen en la fuente de mayor prioridad se pasan a una fuente de menor prioridad, como el estilo de agente de usuario. El proceso se llama cascada . Uno de los objetivos de CSS es permitir a los usuarios un mayor control sobre la presentación. Alguien que encuentre difícil leer los títulos en cursiva roja puede aplicar una hoja de estilo diferente. Dependiendo del navegador y del sitio web, un usuario puede elegir entre varias hojas de estilo proporcionadas por los diseñadores, o puede eliminar todos los estilos agregados y ver el sitio usando el estilo predeterminado del navegador, o puede anular solo el estilo de encabezado en cursiva roja sin alterar otros. atributos.