From 387de82f06f8cacee8a7cef53e72bf57c6ecf461 Mon Sep 17 00:00:00 2001
From: devfzn <dev_fzn@proton.me>
Date: Wed, 12 Apr 2023 12:17:48 -0400
Subject: [PATCH] HTML5 y CSS3 pt. 3: Formularios y Tablas 05

Transiciones - clase 'enviar' para input submit.
Propiedades CSS: cursor: pointer, transition, transform: scale y rotate.
---
 004_primeras_paginas/README.md                | 26 ++++++++-----------
 .../html_css_parte3/contacto.html             |  2 +-
 .../html_css_parte3/style.css                 | 19 ++++++++++++++
 3 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/004_primeras_paginas/README.md b/004_primeras_paginas/README.md
index d591215..783893d 100644
--- a/004_primeras_paginas/README.md
+++ b/004_primeras_paginas/README.md
@@ -173,27 +173,22 @@ en [productos.css](./html_css_parte2/productos.css).
 Se utiliza una imagen como fondo con la propiedad css background
 `background: url(./imagenes/bg.jpg)` para la etiqueta `<footer>`.
 
-[Centrar](https://www.aluracursos.com/blog/centrar-un-elemento-con-css) un
+- [Centrar](https://www.aluracursos.com/blog/centrar-un-elemento-con-css) un
 elemento con css.
-
-Caracteres especiales, unicode
+- Caracteres especiales, unicode
 [wiki](https://en.wikipedia.org/wiki/List_of_Unicode_characters).
 
 Final curso HTML5 y CSS parte 2
 
 ### Parte 3 - Formularios y Tablas
 
-Nueva página, [contacto.html](./html_css_parte3/contacto.html).
-
-Se renombraron los estilos css: productos.css como [style.css](./html_css_parte3/style.css),
+- Nueva página, [contacto.html](./html_css_parte3/contacto.html).
+- Se renombraron los estilos css: productos.css como [style.css](./html_css_parte3/style.css),
 y style.css como [style_home](./html_css_parte3/style_home.css).
-
-Creación de formulario HTML, tags `<form>`', `<input>` (text y submit)
+- Creación de formulario HTML, tags `<form>`', `<input>` (text y submit)
 para entradas de usuario. Tag `<label>` como etiqueta.
-
-Conexión del **input** () con su **label**.
-
-Uso de `id` para el `input` asociado al atributo `for` del `label`.
+- Conexión del **input** () con su **label**.
+- Uso de `id` para el `input` asociado al atributo `for` del `label`.
 
 Jerarquía en css, ejemplo.
 
@@ -297,6 +292,7 @@ p.test { color: magenta; }
 
 </details></br>
 
-Etiqueta `<fieldset>` como agrupador y `<legend>` como parrafo.
-
-Descripción de imagenes `alt="Descripción de imagen"`.
+- Etiqueta `<fieldset>` como agrupador y `<legend>` como parrafo.
+- Descripción de imagenes `alt="Descripción de imagen"`.
+- Clase css *enviar* para input submit "Enviar Formulario" [contacto](./html_css_parte3/contacto.html#L63).
+- Propiedades: cursor (pointer), transition, transform (scale, rotate).
diff --git a/004_primeras_paginas/html_css_parte3/contacto.html b/004_primeras_paginas/html_css_parte3/contacto.html
index 03a4138..4487a6f 100644
--- a/004_primeras_paginas/html_css_parte3/contacto.html
+++ b/004_primeras_paginas/html_css_parte3/contacto.html
@@ -60,7 +60,7 @@
                 <label class="checkbox"><input type="checkbox" checked>
                     ¿Te interesa recibir novedades y ofertas?
                 </label>
-                <input type="submit" value="Enviar Formulario"/>
+                <input type="submit" class="enviar" value="Enviar Formulario"/>
             </form>
         </main>
         <footer>
diff --git a/004_primeras_paginas/html_css_parte3/style.css b/004_primeras_paginas/html_css_parte3/style.css
index 07a75e0..a955af8 100644
--- a/004_primeras_paginas/html_css_parte3/style.css
+++ b/004_primeras_paginas/html_css_parte3/style.css
@@ -120,6 +120,25 @@ form label, form legend {
     margin: 20px 0;
 }
 
+.enviar {
+    width: 40%;
+    padding: 15px 0;
+    font-size: 18px;
+    font-weight: bold;
+    color: #f1f1f1;
+    background: #046dfc;
+    border: none;
+    border-radius: 5px;
+    /*transition: 0.3s background;*/
+    transition: 0.3s all;
+    cursor: pointer;
+}
+
+.enviar:hover{
+    background-color: #cd4f39;
+    transform: scale(1.2) rotate(4deg);
+}
+
 /* Usados para observar Jerarquía en CSS
 form p {
     color: blue;