bootstrap button

Link Animation

Beispiel einer animierten Underline bei Hover an einem Link

Unten die CSS für meine Animation vom Link im Block oben. Ich habe diese CSS hier, damit man es einfacher im Quelltext erkennen kann, in die > "Page Settings" > "Inside <head> code" kopiert. Die hier verwendete class="underlined-example" habe ich als <span> Tag um den verlinkten Text gesetzt:


<a href="Link-Animation.html#content1-dd"><span class="underlined-example">Gehe mit Maus über diesen Link-Text zur CSS</span></a>


Diese CSS habe ich, etwas abgewandelt, auf tobiasahlin.com gefunden.

<style>

    .underlined-example {

        position: relative;

        text-decoration: none;

        font-size: 15px;

        display:inline-block;

    }

    .underlined-example:hover {

        color: #000;

    }

    .underlined-example:before {

        content: "";

        position: absolute;

        width: 100%;

        height: 2px;

        bottom: 0;

        left: 0;

        background-color: red;

        visibility: hidden;

        -webkit-transition: all 0.6s ease-in-out 0s;

        -moz-transition: all 0.6s ease-in-out 0s;

        -o-transition: all 0.6s ease-in-out 0s;

        transition: all 0.6s ease-in-out 0s;

        -webkit-transform: scaleX(0);

        -moz-transform: scaleX(0);

        -o-transform: scaleX(0);

        transform: scaleX(0);

    }

    .underlined-example:hover:before {

        visibility: visible;

        -webkit-transform: scaleX(1);

        -moz-transform: scaleX(1);

        -o-transform: scaleX(1);

        transform: scaleX(1);

    }

</style>