Heute zeige ich euch mal wie ihr so einen Swipe Button aus euren Links erstellen könnt. Ein Swipe Button ist ja ein bekanntes Element dank den Touchscreen Oberfläche wenn man etwas entschlüsseln möchte und so kann man auch die Dinger für Links verwenden.
Wie das ganze geht und wie es aufgebaut ist, findet ihr im Video
Video
HTML
1 2 3 | <a href="#" class="wischen">Nächste Seite<span><ion-icon name="arrow-redo-circle-outline"></ion-icon></span></a>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script> |
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 | .wischen {
position: relative;
width: 200px;
height: 60px;
background: rgba(255, 255, 255, 0.1);
border-radius: 60px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
letter-spacing: 2px;
border-top: 0.5px solid rgba(255, 255, 255, 0.35);
border-left: 0.5px solid rgba(255, 255, 255, 0.35);
padding-left: 40px;
transition: 500ms;
}
.wischen:hover {
padding-left: 0px;
padding-right: 40px;
color: rgba(255, 255, 255, 1);
}
.wischen span {
position: absolute;
left: 5px;
width: 50px;
height: 50px;
background: rgb(149, 149, 149);
border-radius: 50%;
transition: 500ms ease-in-out;
display: flex;
justify-content: center;
align-items: center;
color: #67f3f7;
font-size: 2em;
}
.wischen:hover span {
left: calc(100% - 55px);
} |
0 Kommentare