Table of Contents
Introduction:
In this setup guide, you will learn how to structure a Sci-fi Card Hover Effect of HTML and CSS code snippets to create visually appealing cards with buttons. The HTML code includes a Card Hover Effect layout with a title and button icons, while the CSS code provides styling for the card elements, such as shadows and animations.
Join Our Telegram Channel to Download the Project Source Code: Click Here
Steps to Create: a Sci-fi Card Hover Effect
This guide provides step-by-step instructions to set up a Sci-fi Card Hover Effect that includes a unique design, animation, and interactive elements. The setup involves HTML for structure, CSS for styling, and JavaScript for interactive behavior.
HTML Setup:
- Create a new file named “index.html” in your project directory.
- Copy and paste the provided HTML code into the “index.html” file.
- Ensure the HTML structure includes multiple instances of the card setup with the necessary div elements for each card, including the box shadow, main, top, left side, right side, title, and button container.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Sci-fi Card Hover Effect</title>
</head>
<body>
<div class="card">
<div class="boxshadow"></div>
<div class="main">
<div class="top"></div>
<div class="left side"></div>
<div class="right side"></div>
<div class="title">TITLE</div>
<div class="button-container">
<button class="button"><svg class="svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" stroke="red" fill="none" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
<line x1="17.5" x2="17.51" y1="6.5" y2="6.5"></line>
</svg>
</button>
<button class="button"><svg class="svg twitter" xmlns="http://www.w3.org/2000/svg" height="24"
width="24" fill="red" viewBox="0 0 512 512">
<path
d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z">
</path>
</svg>
</button>
<button class="button"><svg class="svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="red" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path
d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4">
</path>
<path d="M9 18c-4.51 2-5-2-7-2"></path>
</svg>
</button>
</div>
</div>
</div>
<div class="card">
<div class="boxshadow"></div>
<div class="main">
<div class="top"></div>
<div class="left side"></div>
<div class="right side"></div>
<div class="title">TITLE</div>
<div class="button-container">
<button class="button"><svg class="svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" stroke="red" fill="none" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
<line x1="17.5" x2="17.51" y1="6.5" y2="6.5"></line>
</svg>
</button>
<button class="button"><svg class="svg twitter" xmlns="http://www.w3.org/2000/svg" height="24"
width="24" fill="red" viewBox="0 0 512 512">
<path
d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z">
</path>
</svg>
</button>
<button class="button"><svg class="svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="red" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path
d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4">
</path>
<path d="M9 18c-4.51 2-5-2-7-2"></path>
</svg>
</button>
</div>
</div>
</div>
<div class="card">
<div class="boxshadow"></div>
<div class="main">
<div class="top"></div>
<div class="left side"></div>
<div class="right side"></div>
<div class="title">TITLE</div>
<div class="button-container">
<button class="button"><svg class="svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" stroke="red" fill="none" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
<line x1="17.5" x2="17.51" y1="6.5" y2="6.5"></line>
</svg>
</button>
<button class="button"><svg class="svg twitter" xmlns="http://www.w3.org/2000/svg" height="24"
width="24" fill="red" viewBox="0 0 512 512">
<path
d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z">
</path>
</svg>
</button>
<button class="button"><svg class="svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="red" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path
d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4">
</path>
<path d="M9 18c-4.51 2-5-2-7-2"></path>
</svg>
</button>
</div>
</div>
</div>
<div class="card">
<div class="boxshadow"></div>
<div class="main">
<div class="top"></div>
<div class="left side"></div>
<div class="right side"></div>
<div class="title">TITLE</div>
<div class="button-container">
<button class="button"><svg class="svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" stroke="red" fill="none" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
<line x1="17.5" x2="17.51" y1="6.5" y2="6.5"></line>
</svg>
</button>
<button class="button"><svg class="svg twitter" xmlns="http://www.w3.org/2000/svg" height="24"
width="24" fill="red" viewBox="0 0 512 512">
<path
d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z">
</path>
</svg>
</button>
<button class="button"><svg class="svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="red" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path
d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4">
</path>
<path d="M9 18c-4.51 2-5-2-7-2"></path>
</svg>
</button>
</div>
</div>
</div>
</body>
</html>CSS Setup:
- Create a new file named “styles.css” in the same directory as the “index.html” file.
- Copy and paste the provided CSS code into the “styles.css” file.
- The CSS code defines the layout and styling for each card element, including background colors, dimensions, transitions, and animations.
- The CSS styling includes effects such as shadows, gradients, and hover animations to enhance the visual appearance of the cards.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #212121;
min-height: 100dvh;
width: 100%;
display: flex;
gap: 50px;
flex-wrap: wrap;
padding: 30px;
justify-content: center;
align-items: center;
}
.card {
position: relative;
height: 300px;
width: 230px;
&:nth-child(2) {
filter: hue-rotate(300deg) brightness(1.3);
}
&:nth-child(3) {
filter: hue-rotate(200deg) brightness(1.5);
}
&:nth-child(4) {
filter: hue-rotate(60deg) brightness(3);
}
.boxshadow {
position: absolute;
height: 100%;
width: 100%;
border: 1px solid red;
transform: scale(0.8);
box-shadow: rgba(255, 0, 0, 1) 0px 30px 70px 0px;
transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.main {
width: 230px;
height: 300px;
overflow: hidden;
background: red;
background: linear-gradient(
0deg,
rgb(62, 0, 0) 0%,
rgba(255, 0, 0, 1) 60%,
rgb(62, 0, 0) 100%
);
position: relative;
clip-path: polygon(
0 0,
100% 0,
100% 40px,
100% calc(100% - 40px),
calc(100% - 40px) 100%,
40px 100%,
0 calc(100% - 40px)
);
box-shadow: rgba(255, 0, 0, 1) 0px 7px 29px 0px;
transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
.top {
position: absolute;
top: 0px;
left: 0;
width: 0px;
height: 0px;
z-index: 2;
border-top: 115px solid black;
border-left: 115px solid transparent;
border-right: 115px solid transparent;
transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.side {
position: absolute;
width: 100%;
top: 0;
transform: translateX(-50%);
height: 101%;
background: black;
clip-path: polygon(0% 0%, 50% 0, 95% 45%, 100% 100%, 0% 100%);
transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 1s;
}
.left {
left: 0;
}
.right {
right: 0;
transform: translateX(50%) scale(-1, 1);
}
.title {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 90px;
font-weight: bold;
font-size: 25px;
opacity: 0;
z-index: -1;
transition: all 0.2s ease-out 0s;
}
.button-container {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
.button {
position: absolute;
transform: translateX(-50%);
padding: 5px 10px;
clip-path: polygon(0 0, 100% 0, 81% 100%, 21% 100%);
background: black;
border: none;
color: white;
display: grid;
place-content: center;
transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
.svg {
width: 15px;
transition: all 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
&:nth-child(1) {
bottom: 300px;
transition-delay: 0.4s;
}
&:nth-child(2) {
bottom: 300px;
transition-delay: 0.6s;
}
&:nth-child(3) {
bottom: 300px;
transition-delay: 0.8s;
}
&:hover {
.svg {
transform: scale(1.2);
}
}
&:active {
.svg {
transform: scale(0.7);
}
}
}
}
}
}
.card {
&:hover {
.main {
transform: scale(1.1);
.top {
top: -50px;
}
.left {
left: -50px;
transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.1s;
}
.right {
right: -50px;
transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.1s;
}
.title {
opacity: 1;
transition: all 0.2s ease-out 1.3s;
}
.button-container {
.button {
&:nth-child(1) {
bottom: 80px;
transition-delay: 0.8s;
}
&:nth-child(2) {
bottom: 40px;
transition-delay: 0.6s;
}
&:nth-child(3) {
bottom: 0;
transition-delay: 0.4s;
}
}
}
}
}
}
Conclusion:
By setting up the HTML and CSS code provided, you will be able to create a visually appealing Card Hover Effect with interactive buttons. The HTML structure defines the Card Hover Effect layout, while the CSS styling enhances the design with effects and animations. Once you have integrated the code into your project files, you can further customize the cards to suit your design preferences.
Note: Remember to link the CSS file to the HTML file using <link rel="stylesheet" href="styles.css"> in the <head> section of the HTML file to apply the defined styles to the Card Hover Effect.
Join Our Telegram Channel to Download the Project Source Code: Click Here
For your convenience, the total source code of this “login and signup form” project instructional practice is accessible for download by clicking the Download Code button.
Note: Keep in mind that the way to dominate coding is practice. To enhance your skills in JavaScript, HTML & CSS, we recommend recreating other useful website elements such as Custom Button, Reviews Card, Contact Page, Navigation, Login Forms, etc.
More Categories:
Blog • Cards • Fun Project • Game • Hamburger Menu • Login / Signup • Navbar • Testimony / Reviews • To-Do List
