Depot43-Unterlagen - Transition Button

HTML Elemente

            
            



<!doctype html>
<html lang="de">
<head>
	<meta charset=utf-8>
	<title>HTML5 Flex CSS - Transition Button</title>
	<style>
	.button {
		transition: all 0.5s ;
		transition-timing-function: ease-in-out;
		background-color: #900;
		color: white;
		margin: 1em auto;
		max-width: 15em;
		padding: 1em;
		position: relative;
		cursor: pointer;
		text-align: center;
	}

	.button:after {
    		transition: all 0.5s;
		transition-timing-function: ease-in-out;
		content: "";
 		border: solid transparent;
		border-top-color: #900;
		left: 50%;
		position: absolute;
		border-width: 30px;
		margin-left: -30px;
		bottom: -1.8em;
	}
	.button:hover {
		background-color: #f00;
		margin: 1.5em auto;
	}
	.button:hover:after {
		bottom: -3.6em;
		border-top-color: #f00;
	}
		.button-message {
		color: #fff;
	}
	</style>
</head>
<body>
    <div class="button">
        <p class="button-message">Darüber fahren!</p>
    </div>
</body>
</html>


 

            

Hinweis

Das Button-Element wird mit CSS formatiert. Die CSS-Pseudoeigenschaft :after zeichnet das Dreieck.

Die CSS-Eigenschaft "transition" enthällt die Parameter: Eigenschaft, Zeitraum und "transition-timing-function"

Mit der Pseudoeigenschaft :hover werden Farbe gewechselt und das Dreieck bewegt.

transition-timing-function

Damit ist es möglich, weiche Animationsbewegungen zu erzeugen. Die Standardeinstellung ist "linear".

transition-timing-function: linear;
transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;

sdvds