Html & CSS modern button style
SAMPLE OUTPUT
- Poppins Font: The code imports the Poppins font from Google Fonts using the '@import' statement.
- Reset CSS: CSS rules to reset the '*` selector to default margin, padding and box size, ensuring consistent styling across different browsers.
- Containers: The `.containers' class is a flexible container, aligning its content horizontally and vertically using 'justify-content: center' and 'align-items: center'. It also has a "min height" of 300px and a background color of "#27282c".
- Buttons: The '.Button' class styles interactive buttons. It has a 'positions:relative' property and uses padding to make room for the buttons. The 'font size', 'color' and 'border' properties are defined with shadow effects and a transition duration of '0.5 s'.
- Button Hover Effects: During navigation, the button's color is inverted and the border disappears, and a box-shadow and background-scale transformation is applied using CSS transitions. These effects create an interesting animation.
- Dummy Elements of Buttons: A dummy '::before' element is used to create a background layer for the buttons. Start at scale 0 and continue creating a shadow effect with a delayed transition.
- Button text animation: The '.buttonspacing' option styles the animated spanner element inside the buttons. It has a bright, dynamic effect background, border radius and shadow box. This gap is transparent when navigating through a transition.
- Button text location: Buttons are placed at each end of the sections. The `::nth-child` selector is used to set their positions individually.
- Contents of Button: Inside the `.containers` div, there are three `<a>` elements with class `.button`. Each button has a different color defined by the `--color` custom property. The button text (1, 2, 3) is provided as content.
HTML CODE
<html>
<head>
<style>
</style>
</head>
<body>
<div class="containers">
<a class="button" style="--color: #1e9bff;">
<span></span>
<span></span>
<span></span>
<span></span>
1
</a>
<a class="button" style="--color: #ff0000;">
<span></span>
<span></span>
<span></span>
<span></span>
2
</a>
<a class="button" style="--color: #6eff3e;">
<span></span>
<span></span>
<span></span>
<span></span>
3
</a>
</div>
</body>
</html>
CSS CODE
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600;700;800;900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.containers {
width: 100%;
min-height: 300px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 120px;
background: #27282c;
align-items: center;
margin-top: 20px; /* Add margin from top */
}
.button {
position: relative;
padding: 16px 30px;
font-size: 1.5rem;
color: var(--color);
border: 2px solid rgba(255, 255, 255, 0.5);
border-radius: 4px;
text-shadow: 0 0 15px var(--color);
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.1rem;
transition: 0.5s;
z-index: 1;
}
.button:hover {
color: #fff;
border: 2px solid rgba(0, 0, 0, 0);
box-shadow: 0 0 0px var(--color);
}
.button::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--color);
z-index: -1;
transform: scale(0);
transition: 0.5s;
}
.button:hover::before {
transform: scale(1);
transition-delay: 0.5s;
box-shadow: 0 0 10px var(--color),
0 0 30px var(--color),
0 0 60px var(--color);
}
.button span {
position: absolute;
background: var(--color);
pointer-events: none;
border-radius: 2px;
box-shadow: 0 0 10px var(--color),
0 0 20px var(--color),
0 0 30px var(--color),
0 0 50px var(--color),
0 0 100px var(--color);
transition: 0.5s ease-in-out;
transition-delay: 0.25s;
}
.button:hover span {
opacity: 0;
transition-delay: 0s;
}
Tags
html & css