CSS Button Hover Effects Animation
Σελίδα 1 από 1 • Μοιραστείτε
- Port Admin
Admin - Αριθμός μηνυμάτων : 2651
Πόντοι : 6380
Ημερομηνία εγγραφής : 06/03/2017 -
Port Admin Δευ Σεπ 05, 2022 10:50 pm
[Πρέπει να είστε εγγεγραμμένοι και συνδεδεμένοι για να δείτε αυτόν το σύνδεσμο.] are more beautiful and attractive animation effects These hover effects we can also apply to any image and icon and here we have provided you four types of hover effects source code that we can use easily in our projects.
[Πρέπει να είστε εγγεγραμμένοι και συνδεδεμένοι για να δείτε αυτόν το σύνδεσμο.]
[Πρέπει να είστε εγγεγραμμένοι και συνδεδεμένοι για να δείτε αυτόν το σύνδεσμο.]
- Κώδικας:
<style>
*{
padding: 0px;
margin: 0px;
box-sizing: border-box;
font-family: arial;
}
hr {
border: 1px solid #ddd;
margin: 30px 0px;
}
.btn-hover {
box-shadow: 0px 0px 10px 0px #b5b5b5;
justify-content: center;
align-items: center;
text-align: center;
width: 90%;
margin: 50px auto 0px;
padding: 50px 0px;
border-radius: 10px;
}
.btn-hover .button {
background: none;
padding: 10px 20px;
font-size: 19px;
margin: 10px;
position: relative;
overflow: hidden;
z-index: 1;
box-shadow: 0px 1px 10px 0px rgb(206, 205, 201);
border-radius: 25px;
border: 1px solid #e6e6e6;
color: #333333;
transition: 0.5s;
min-width: 30%;
outline: none;
cursor: pointer;
}
.btn-hover .button:hover {
color: #fff;
}
/*-- Hover Effect from left to right --*/
.left-right::before {
content: "";
position: absolute;
width: 15px;
height: 100%;
top: 0px;
left: 0px;
background: #F44336;
z-index: -1;
transition: 0.5s;
}
.left-right:hover::before{
width: 100%;
}
/*-- Hover Effect from right to left --*/
.right-left::before{
content: "";
position: absolute;
width: 15px;
height: 100%;
top: 0px;
right: 0px;
background: #9C27B0;
z-index: -1;
transition: 0.5s;
}
.right-left:hover::before{
width: 100%;
}
/*-- Hover Effect from top to Bottom --*/
.top-bottom::before {
content: "";
position: absolute;
width: 100%;
height: 7px;
top: 0px;
left: 0px;
background: #673ab7;
z-index: -1;
transition: 0.5s;
}
.top-bottom:hover::before{
height: 100%;
}
/*-- Hover Effect from bottom to top --*/
.bottom-top::before {
content: "";
position: absolute;
width: 100%;
height: 7px;
top: 36px;
left: 0px;
bottom: 0px;
background: #03a9f4;
z-index: -1;
transition: 0.5s;
}
.bottom-top:hover::before{
height: 100%;
top: 0px;
}
</style>
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>How To Create CSS Button Hover Effects Animation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="btn-hover">
<button type="button" class="button left-right">URL</button>
<button type="button" class="button right-left">Right To Left</button>
<hr>
<button type="button" class="button top-bottom">Top To Bottom</button>
<button type="button" class="button bottom-top">Bottom To Top</button>
</div>
</body>
</html>
__________________
Download: Για να δείτε το κρυφό περιεχόμενο θα πρέπει να σχολιάσετε.
To see hidden content you should comment.
Παρόμοια θέματα
Δημιουργήστε έναν λογαριασμό ή συνδεθείτε για να απαντήσετε
Προκειμένου να απαντήσετε πρέπει να είστε μέλος.
Δημιουργία Λογαριασμού
Ενταχθείτε στην κοινότητά μας δημιουργώντας έναν λογαριασμό. Είναι πανεύκολο!
Δημιουργία ενός νέου Λογαριασμού
Σελίδα 1 από 1
Δικαιώματα σας στην κατηγορία αυτή
Δεν μπορείτε να απαντήσετε στα Θέματα αυτής της Δ.Συζήτησης
