Shiny Box Hover effect
In this article, I am going to tell you how you can create a very beautiful Box Hover Effect in HTML and CSS with simple steps. you just need to write a simple code of text to create this HTML Box Hover Effect in HTML and CSS. We will use in this code HTML and simple internal CSS.
first of all, you have to create a folder, where you want to create a save file of code and then drag it or open it on your text editor, after that, you have to save this file by giving any name with the extension name .html.
after saved this file, you just write a simple structure of HTML and create content and follow the code which is given below.
Queries Solved:-
best computer center in tohana,computer center in tohana, best institute in tohana,creative networks tohana,website designing,web design in tohana,creative,networks,o-level computer course,tohana best institute,creative networks computer center, html,html tutorial,html5,learn html,html tutorial for beginners,html css,html course,html for beginners,html css tutorial,html,html5 tutorial,introduction to html,html 5,html crash course,.html,html elements,html,html tags,html,html ,html за час,html leren,html за 1 час,html basics,html coding,html (programming language),html,html html html,html nederlands,html, css,css tutorial,html css,css tips,css grid,css crash course,css for beginners,css course,learn css,css beginners,css tutorial for beginners,css,css 2020,css animation,css hindi,css 3,css preparation,css tricks,css em,css vh,css vw,3d css,css desde cero,css rem,css,css all,css transition,tutorial de css,css full course,css course for beginners,css 2021,учим css,grid css,css,css,css
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
font-family: roboto;
}
body
{
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.team
{
width: 260px;
height: auto;
text-align: center;
border-radius: 5px;
padding: 30px 25px;
margin-left: 20px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
background-color: #fff;
overflow: hidden;
box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
7px 7px 20px 0px rgba(0,0,0,.1),
4px 4px 5px 0px rgba(0,0,0,.1);
}
img
{
width: 120px;
height: 120px;
margin: 20px 0px 10px 0px;
border-radius: 100%;
box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
7px 7px 20px 0px rgba(0,0,0,.1),
4px 4px 5px 0px rgba(0,0,0,.1);
}
h1
{
color: #7b7e8f;
margin: 6px 0px;
text-align: center;
font-weight: 400;
font-size: 28px;
letter-spacing: 2px;
}
.team:hover h1
{
color: #fff;
}
h3
{
font-weight: 100px;
letter-spacing: 1px;
font-size: 14px;
color: #7b7e8f;
}
p
{
text-align: center;
font-size: 13px;
margin: 10px 0px;
font-weight: 400;
line-height: 16px;
color: #b4b4b8;
}
button
{
border-radius: 25px;
width: 120px;
height: 35px;
background: linear-gradient(45deg,#7d62d4 30%,#e655ae 70%);
border:none;
color: #fff;
box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
7px 7px 20px 0px rgba(0,0,0,.1),
4px 4px 5px 0px rgba(0,0,0,.1);
}
.team:hover
{
background-color: #24273a;
text-decoration: none;
color: #fff;
box-shadow:none;
}
.team:before
{
position: absolute;
content: '';
display: inline-block;
top: -180px;
left: 0;
width: 30px;
height: 100%;
background-color: #fff;
animation: shiny-btn1 2s ease-in-out infinite;
}
@-webkit-keyframes shiny-btn1 {
0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}
.team2:before
{
animation: shiny-btn2 2s ease-in-out infinite;
animation-delay: .5s;
}
@-webkit-keyframes shiny-btn2 {
0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}
.team3:before
{
animation: shiny-btn3 2s ease-in-out infinite;
animation-delay: 1s;
}
@-webkit-keyframes shiny-btn3 {
0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}
</style>
</head>
<body>
<div class="main">
<div class="team">
<img src="https://www.gorgeouspresence.com.au/wp-content/uploads/2017/07/Megan-Street-Profile-square.jpg">
<h1>Grey!</h1>
<h3>Senior Product Designer</h3>
<p>Create Usable interface and<br> designs @creative</p>
<button>Hire Me</button>
</div>
<div class="team team2">
<img src="https://sunrift.com/wp-content/uploads/2014/12/Blake-profile-photo-square.jpg">
<h1>Rob!</h1>
<h3>Senior Product Designer</h3>
<p>Create Usable interface and<br> designs @creative</p>
<button>Hire Me</button>
</div>
<div class="team team3">
<img src="https://millionairedating.onluxy.com/wp-content/uploads/2018/12/woman-smilling-in-red-top-and-red-lipstick-square-e1544061815643.jpg">
<h1>Lucy!</h1>
<h3>Senior Product Designer</h3>
<p>Create Usable interface and<br> designs @creative</p>
<button>Hire Me</button>
</div>
</div>
</body>
</html>
Here we completed our tutorial.
If you face any problem please feel free to contact us.
If you like our article please share it with your friends and relatives.
Thanks for reading our article.
Button Hover HTML and CSS with Source code
Button border animation effect in HTML and CSS with Source code
Queries Solved:-
effects,how to create content box hover effects,image hover effects,css card hover effect,css hover tutorial,css card hover effects,image hover effects in html,css creative box hover effects,tohana,creativenetworks,best computer center in tohana,computer center in tohana, best institute in tohana,creative networks tohana,website designing,web design in tohana,creative,networks,o-level computer course,tohana best institute,creative networks computer center, beginners,html css tutorial,html,html5 tutorial,introduction to html,html 5,html crash course,.html,html elements,html,html tags,html,html ,html за час,html leren,html за 1 час,html basics,html coding,html (programming language),html,html html, Shiny Box Hover effect, html,html nederlands,html, css,css tutorial,html css,css tips,css grid,css crash course,css for beginners,css course,learn css,css beginners,css tutorial for beginners,css,css 2020,css animation,css hindi,css 3,css preparation,css tricks,css em,css vh,css vw,3d css,css desde cero,css rem,css,css all,css transition,tutorial de css,css full course,css course for beginners,css 2021,учим css,grid css,css,css,css
