Inhaltsverzeichnis
Heute möchte ich euch mal ein speziellen Button zeigen und zwar einen 2 in 1. Wenn man mit der Maus über den Button fährt, dann kommen anstatt nur 1 Links halt 2 oder mehrere daher. So kann man also mit 1 Button mehrere Social Media Links präsentieren oder andere spezielle Infos.
Video
HTML
1 2 3 4 5 6 7 8 9 | <div class="button">
<span class="text">Kontakt</span>
<i class="icon fas fa-share-alt"></i>
<div class="socialmedia">
<a href="#"><i class="fab fa-facebook"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #106a03;
/*background-color: #eee;*/
}
.button {
background: linear-gradient(30deg, #090979, #00d4ff);
color: #fff;
border: 0;
padding: 16px 40px;
font-size: 16px;
cursor:pointer;
overflow: hidden; /* stehen lassen */
position: relative;
border-radius: 40px;
transition: 300ms;
}
.socialmedia {
position: absolute;
width: 100%;
left: 0;
display: flex;
justify-content: space-around;
bottom: 0;
transform: translateY(100%);
}
.socialmedia a{
color: #fff;
transition: 300ms;
}
.button:hover{
border-radius: 0;
}
.text, .icon {
display: inline-block;
transition: 300ms;
}
.button:hover .text,
.button:hover .icon,
.button:hover .socialmedia a {
transform: translateY(-35px);
}
.socialmedia a:hover {
opacity: 0.7;
color: #ff0000;
} |
0 Kommentare