Creating Glowing Buttons using HTML and CSS Tutorial

Submitted by oretnom23 on Monday, March 27, 2023 - 17:05.

In this tutorial, you can learn how to create Glowing Buttons using HTML and CSS. The tutorial aims to provide students and beginners with a reference for learning to create or build interactive web page components. Here, I will be providing simple web page scripts that demonstrate the creation of glowing buttons.

Why do developers implement Glowing Buttons?

Your website or blog site would benefit greatly from having interactive glowing buttons. You can make buttons that illuminate when the user hovers over them which can result in providing your end-users with a better experience while exploring and using your site.

How to create Glowing Buttons using HTML and CSS?

Glowing Buttons can be easily achieved using some useful CSS pseudo-elements and properties. The CSS Animation property will come in handy to build an interactive and effective glowing button. Then, using the CSS :hover selector, we can detect if the user hovers the button and execute the glowing animation. Check out the sample web page that I created below to understand more about how to achieve the Glowing Button.

Sample Web Page

The scripts below result in a simple web page that contains 2 sample buttons that glow when you hover the buttons.

Page Interface

The following script is the HTML file script named index.html. It contains the page layout and the sample button elements.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>HTML CSS - Glowing Button</title>
  8.     <link rel="preconnect" href="https://fonts.googleapis.com">
  9.     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  10.     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
  11.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
  12.     <link rel="stylesheet" href="style.css">
  13.     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  14. </head>
  15. <body>
  16.     <div class="content-md-lg py-3">
  17.         <div class="col-lg-5 col-md-8 col-sm-12 col-12 mx-auto">
  18.             <div class="page-title">Creating a Glowing Buttons using HTML and CSS</div>
  19.             <hr style="margin:auto; width:25px" class="border-light opacity-100">
  20.         </div>
  21.         <div class="container-lg">
  22.             <div class="row py-3 my-5">
  23.                 <div class="col-lg-5 col-md-5 col-sm-10 col-12 mx-auto">
  24.                     <!-- Sample Buttons -->
  25.                     <div class="row justify-content-evenly">
  26.                         <div class="col-lg-4 col-md-6 col-sm-12 col-sm-12">
  27.                             <button id="glowing-button-1" type="button" class="glowing-button">Button #1</button>
  28.                         </div>
  29.                         <div class="col-lg-4 col-md-6 col-sm-12 col-sm-12">
  30.                             <button id="glowing-button-2" type="button" class="glowing-button">Button #2</button>
  31.                         </div>
  32.                     </div>
  33.                     <!-- Sample Buttons -->
  34.                 </div>
  35.             </div>
  36.         </div>
  37.     </div>
  38. </body>
  39. </html>

Stylesheet

Next, here's the following script that contains the glowing effect codes. It is a custom CSS or Cascading Stylesheet known as style.css. The file contains also the codes of some page elements' custom designs.

  1. @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@200&family=Space+Mono&display=swap" rel="stylesheet');
  2. :root{
  3.     --space-mono-font: 'Space Mono', monospace;
  4.     --border-dark-subtle: #373838; 
  5. }
  6. *{
  7.     box-sizing: border-box;
  8. }
  9. body *{
  10.     font-family: var(--space-mono-font);
  11. }
  12. /**
  13. Page Design
  14. */
  15. body,
  16. html{
  17.     height: 100%;
  18.     width: 100%;
  19.     margin: 0;
  20.     padding: 0;
  21. }
  22. body{
  23.     background-color: #282A3A;
  24. }
  25. .page-title{
  26.     font-size: 2.5rem;
  27.     font-weight: 500;
  28.     color: #fff;
  29.     letter-spacing: 3px;
  30.     font-family: var(--secular-font);
  31.     text-align: center;
  32.     text-shadow: 0px 0px 3px #2020208c;
  33. }
  34. .border-dark-subtle{
  35.     border-color: var(--border-dark-subtle) !important;
  36. }
  37.  
  38. /* Buttons Custom Design */
  39. button.glowing-button {
  40.     width: 100%;
  41.     min-height: 40px;
  42.     border-radius: 30px;
  43.     font-weight: 500;
  44.     letter-spacing: 1.5px;
  45.     border: unset;
  46. }
  47.  
  48. /* Button 1 Custom Design */
  49. #glowing-button-1{
  50.     background-color: #000;
  51.     color: #fff;
  52.     box-shadow: 0px 0px 3px #ffffff63;
  53. }
  54.  
  55. /* Button 2 Custom Design */
  56. #glowing-button-2{
  57.     background-color: #1f75f5;
  58.     color: #fff;
  59.     box-shadow: 0px 0px 3px #67a3fda1;
  60. }
  61.  
  62. /* Button 1 Glow Animation on Hover */
  63. #glowing-button-1:hover{
  64.     animation: glow1 2s ease-in-out infinite;
  65. }
  66. @keyframes glow1 {
  67.     0%{
  68.         background-color: #000;
  69.         color: #fff;
  70.         box-shadow: 0px 0px 3px #ffffff63;
  71.     }
  72.     50%{
  73.         background-color: #050505;
  74.         color: #fff;
  75.         box-shadow: 0px 0px 30px #ffffffee;
  76.     }
  77. }
  78.  
  79. /* Button 2 Glow Animation on Hover */
  80. #glowing-button-2:hover{
  81.     animation: glow2 2s ease-in-out infinite;
  82. }
  83. @keyframes glow2 {
  84.     0%{
  85.         background-color: #1f75f5;
  86.         color: #fff;
  87.         box-shadow: 0px 0px 3px #67a3fda1;
  88.     }
  89.     50%{
  90.         background-color: #3481f5;
  91.         color: #fff;
  92.         box-shadow: 0px 0px 30px #7bacf5cb;
  93.     }
  94. }

Snapshots

Here are the images of the overall result of the sample web page that I created and provided above.

Default Buttons Design

Glowing Buttons using CSS

Glowing Buttons

Glowing Buttons using CSS

Whole Page Interface

Glowing Buttons using CSS

There you go! I have also provided the complete source code zip file of the sample web page scripts that I provided above and it is free to download. The download button is located below this tutorial's content. Feel free to download and modify the source code to do some experiments to enhance your programming capabilities.

That's it! I hope this Creating Glowing Buttons using HTML and CSS Tutorial will help you with what you are looking for and will help you with your current and future web application projects.

Explore more on this website for more Tutorials and Free Source Codes.

Happy Coding =)

Tags

Add new comment

About text formats
  • 519 views