Procedure
Step 1 - Setting Up the HTML Structure:
We start with the basic HTML structure. It includes the DOCTYPE declaration, opening and closing html tags, and the head and body sections.
Step 2 - Defining the Character Encoding and Viewport:
In the head section, we set the character encoding to UTF-8 and define the viewport for responsive design.
Step 3 - Title and Fonts:
Inside the head, we set the title of the webpage and import some Google Fonts using @import rule to style our text later on.
Step 4 - Body Styling:
In the style section, we style the body element. We remove margins, set width and height to 100% to cover the whole viewport, and use flexbox to center elements vertically and horizontally. We also create a gradient background.
Step 5 - Button Styles:
We define styles for two types of buttons: darksoul-glowing-button1 and darksoul-glowing-button2. These buttons have similar properties but different gradient backgrounds.
Step 6 - Button Hover Effects:
When hovering over each button, the gradient background changes. This is achieved using the :hover pseudo-class in CSS.
Step 7 - Button Inner Styles:
Inside each button, we define the styles for the button element. This includes setting width, height, background color, margins, borders, font size, and font family.
Step 8 - Keyframes Animation:
We define a keyframe animation named rotation. This animation gradually changes the --gradient-angle property from 0 to 360 degrees, creating a rotating effect.
Step 9 - Custom Property:
We define a custom property --gradient-angle to control the angle of the gradient in the buttons' backgrounds.
Step 10 - Responsive Design:
Finally, we add media queries to adjust the layout for smaller screens. In this case, when the screen width is less than 600px, the gradient background changes direction.
In conclusion, by following these step-by-step instructions, you can create a visually appealing and responsive Glowing Border Button with customizable styles and hover effects.
