Главная » Языки программирования

Css стилизация кнопки отправить

Содержание
  1. 12 CSS Submit Buttons
  2. Related Articles
  3. Author
  4. Links
  5. Made with
  6. About a code
  7. Submit Button
  8. Author
  9. Links
  10. Made with
  11. About a code
  12. Button Hover — Pattern Background Animation
  13. Author
  14. Links
  15. Made with
  16. About a code
  17. Chonky Submit Button
  18. Author
  19. Links
  20. Made with
  21. About the code
  22. Send Button Transforms Into Birds
  23. Author
  24. Links
  25. Made with
  26. About the code
  27. Arrowed Submit Button
  28. Author
  29. Links
  30. Made with
  31. About the code
  32. Submit Loader
  33. Author
  34. Links
  35. Made with
  36. About the code
  37. Animated Submit Buttons
  38. Author
  39. Links
  40. Made with
  41. About the code
  42. Submit Button
  43. Author
  44. Links
  45. Made with
  46. About the code
  47. Button Loading Animation
  48. Author
  49. Links
  50. Made with
  51. About the code
  52. Submit Button
  53. Author
  54. Links
  55. Made with
  56. About the code
  57. Button Interaction
  58. Author
  59. Links
  60. Made with
  61. About the code
  62. Send Button
  63. Author
  64. How to Style Input and Submit Buttons
  65. Example of styling the input and submit buttons:
  66. Result
  67. Example of styling a submit button in a form:

12 CSS Submit Buttons

Collection of hand-picked free HTML and CSS submit button code examples from Codepen, GitHub and other resources. Update of November 2021 collection. 1 new item.

Author

Made with

About a code

Submit Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Button Hover — Pattern Background Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Chonky Submit Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Send Button Transforms Into Birds

A CSS animation of a send button transforming into flying birds when clicked.

Читайте также:  Html coming soon pages

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Arrowed Submit Button

Author

Made with

About the code

Arrowed Submit Button

Just a button with an arrow on hover through CSS. Not really a submit though.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Submit Loader

Author

Made with

About the code

Submit Loader

Submit button with loader.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Animated Submit Buttons

Author

Made with

About the code

Animated Submit Buttons

Submit buttons with success state animation and error state animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Submit Button

Author

Made with

About the code

Submit Button

Submit button with micro-copy status.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Button Loading Animation

Author

Made with

About the code

Button Loading Animation

ES6 button loading animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Submit Button

Author

Made with

About the code

Submit Button

Submit status button with a mixture of SVG, CSS and little bit of ES6.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Button Interaction

Author

Made with

About the code

Button Interaction

Experiment for submit button.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Send Button

Author

Made with

About the code

Send Button

Send button with a transition.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Organic Button

Author

Источник

How to Style Input and Submit Buttons

In the example below, we have elements with type=»button» and type=»submit» , which we style with CSS properties. To style them, we use the background-color and color properties, set the border and text-decoration properties to «none». Then, we add padding and margin, after which we specify the cursor as «pointer».

Example of styling the input and submit buttons:

html> html> head> title>Title of the document title> style> input[type=button], input[type=submit] < background-color: #62529c; border: none; color: #fff; padding: 15px 30px; text-decoration: none; margin: 4px 2px; cursor: pointer; > style> head> body> p>Styled input buttons. p> input type="button" value="Button"> input type="submit" value="Submit"> body> html>

Result

Example of styling a submit button in a form:

html> html> head> title>Title of the document title> style> div < margin-bottom: 10px; > input[type=text] < padding: 5px; border: 2px solid #cccccc; -webkit-border-radius: 5px; border-radius: 5px; > input[type=text]:focus < border-color: #33333; > input[type=submit] < padding: 5px 15px; background: #99e0b2; border: 0 none; cursor: pointer; -webkit-border-radius: 5px; border-radius: 5px; > style> head> body> h2>Form example h2> form action="/form/submit" method="POST"> div> label for="surname">Surname label> input type="text" name="surname" id="surname" placeholder="surname" /> div> div> label for="lastname">Last name label> input type="text" name="lastname" id="lastname" placeholder="lastname" /> div> div> label for="email">Email label> input type="email" name="email" id="email" placeholder="email" /> div> input type="submit" value="Submit" /> form> body> html>

Источник

Оцените статью
© 2024 Программирование