Animated Button With Siren Animation

Animated Button With Siren Animation

Animated Button With Siren Animation

Css

body {
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
min-height: 100vh;
background: #eeeeee;
}

.button {
position: relative;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 1em 2em;
color: white;
font-size: 1.2em;
cursor: pointer;
outline: none;
overflow: hidden;
border: none;
border-radius: 10px;
text-transform: uppercase;
font-weight: bold;
-webkit-animation: example 0.5s linear infinite alternate;
animation: example 0.5s linear infinite alternate;
}

@-webkit-keyframes example {
from {
background: -webkit-gradient(linear, left top, right top, from(#ff0000), to(#3f7fff));
background: linear-gradient(to right, #ff0000 0%, #3f7fff 100%);
}
to {
background: -webkit-gradient(linear, left top, right top, from(#3f7fff), to(#ff0000));
background: linear-gradient(to right, #3f7fff 0%, #ff0000 100%);
}
}

@keyframes example {
from {
background: -webkit-gradient(linear, left top, right top, from(#ff0000), to(#3f7fff));
background: linear-gradient(to right, #ff0000 0%, #3f7fff 100%);
}
to {
background: -webkit-gradient(linear, left top, right top, from(#3f7fff), to(#ff0000));
background: linear-gradient(to right, #3f7fff 0%, #ff0000 100%);
}
}

Html

<button class="button">
<span>reporting</span>
</button>
DEMO
Previous Post
Next Post

post written by:

I am a web designer and developer. Sharing knowledge is my passion and web designing is my interest but it is not bigger than my interest in Islam.

0 Comments: