Skip to content

Instantly share code, notes, and snippets.

@lukasborawski

lukasborawski/01-file_index.html

Last active December 30, 2015 00:49
Show Gist options
  • Save lukasborawski/7751968 to your computer and use it in GitHub Desktop.
Save lukasborawski/7751968 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Animated Buttons.
Raw
01-file_index.html
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Animated Buttons</title>
<link rel="stylesheet" href="style.css"/>
<link href='http://fonts.googleapis.com/css?family=Comfortaa:400,700' rel='stylesheet' type='text/css'>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="description" content="CSS3 Animated Buttons">
<!--[if gte IE 9]>
<style type="text/css">
.gradient {
filter: none;
}
</style>
<![endif]-->
</head>
<body>
<article>
<section>
<div class="buttons_container border_radius_big">
<a href="..." target="_blank" title="Twitter Button" class="gradient button transition_one border_radius">twitter</a>
<a href="..." target="_blank" title="Twitter Button" class="gradient button transition_one border_radius">twitter</a>
<a href="..." target="_blank" title="Twitter Button" class="gradient button transition_one border_radius">twitter</a>
</div>
</section>
</article>
</body>
</html>
Raw
02-file_style.css
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
font-weight: normal;
font-size:22px;
width: 100%;
font-family: "Trebuchet MS", sans-serif;
position: relative;
height: 100%;
background: url('double_lined.png') repeat 0 0;
}
article {
width:100%;
height:100%;
}
/* default class */
.border_radius {
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
.border_radius_big {
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
.transition_one {
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-ms-transition: all 250ms ease-in-out;
-o-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
}
/* main class */
section {
width:800px;
height: auto;
margin: 0 auto;
padding-top: 20px;
text-align: center;
position: relative;
}
.buttons_container {
margin: 0 auto;
width: 660px;
padding-top: 10px;
padding-bottom: 10px;
background: #fff;
border: 1px solid #ccc;
}
a.button {
display: inline-block;
border: 1px solid #c9c9c9;
border-bottom: 2px solid #afafaf;
padding: 10px 15px 10px 65px;
margin: 20px 10px;
line-height: 32px;
color: #a2a2a2;
text-decoration: none;
font-family: 'Comfortaa', Verdana, Tahoma, cursive;
font-size: 30px;
cursor: pointer;
text-shadow: 0 1px 0 #fff;
-webkit-box-shadow: inset 0 4px 10px #fff;
-moz-box-shadow: inset 0 4px 10px #fff;
box-shadow: inset 0 4px 10px #fff;
}
/* 1 */
a.button:nth-of-type(1) {
background-image: url('button_background_01.png');
background-repeat: no-repeat;
background-position: -175px 3px;
background: rgb(252,252,252);
background: url('button_background_01.png') no-repeat -175px 3px, -moz-linear-gradient(top, rgba(252,252,252,1) 1%, rgba(234,234,234,1) 100%);
background: url('button_background_01.png') no-repeat -175px 3px, -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(252,252,252,1)), color-stop(100%,rgba(234,234,234,1)));
background: url('button_background_01.png') no-repeat -175px 3px, -webkit-linear-gradient(top, rgba(252,252,252,1) 1%,rgba(234,234,234,1) 100%);
background: url('button_background_01.png') no-repeat -175px 3px, -o-linear-gradient(top, rgba(252,252,252,1) 1%,rgba(234,234,234,1) 100%);
background: url('button_background_01.png') no-repeat -175px 3px, -ms-linear-gradient(top, rgba(252,252,252,1) 1%,rgba(234,234,234,1) 100%);
background: url('button_background_01.png') no-repeat -175px 3px, linear-gradient(top, rgba(252,252,252,1) 1%,rgba(234,234,234,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#eaeaea',GradientType=0 );
}
a.button:nth-of-type(1):hover {
color: #0087b0;
background-position: 5px 3px;
-webkit-box-shadow: inset 0 1px 6px #fff, 0 0 10px #ddd;
-moz-box-shadow: inset 0 1px 6px #fff, 0 0 10px #ddd;
box-shadow: inset 0 1px 6px #fff, 0 0 10px #ddd;
background: url('button_background_01.png') no-repeat 5px 3px, -moz-linear-gradient(top, rgba(252,252,252,1) 1%, rgba(234,234,234,1) 100%);
background: url('button_background_01.png') no-repeat 5px 3px, -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(252,252,252,1)), color-stop(100%,rgba(234,234,234,1)));
background: url('button_background_01.png') no-repeat 5px 3px, -webkit-linear-gradient(top, rgba(252,252,252,1) 1%,rgba(234,234,234,1) 100%);
background: url('button_background_01.png') no-repeat 5px 3px, -o-linear-gradient(top, rgba(252,252,252,1) 1%,rgba(234,234,234,1) 100%);
background: url('button_background_01.png') no-repeat 5px 3px, -ms-linear-gradient(top, rgba(252,252,252,1) 1%,rgba(234,234,234,1) 100%);
background: url('button_background_01.png') no-repeat 5px 3px, linear-gradient(top, rgba(252,252,252,1) 1%,rgba(234,234,234,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#eaeaea',GradientType=0 );
}
/* 2 */
a.button:nth-of-type(2) {
background-image: url('button_background_02.png');
background-repeat: no-repeat;
background-position: 4px -40px;
background: rgb(252,252,252);
background: url('button_background_02.png') no-repeat 4px -39px, -moz-linear-gradient(top, rgba(252,252,252,1) 1%, rgba(234,234,234,1) 100%);
background: url('button_background_02.png') no-repeat 4px -39px, -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(252,252,252,1)), color-stop(100%,rgba(234,234,234,1)));
background: url('button_background_02.png') no-repeat 4px -39px, -webkit-linear-gradient(top, rgba(252,252,252,1) 1%,rgba(234,234,234,1) 100%);
background: url('button_background_02.png') no-repeat 4px -39px, -o-linear-gradient(top, rgba(252,252,252,1) 1%,rgba(234,234,234,1) 100%);
background: url('button_background_02.png') no-repeat 4px -39px, -ms-linear-gradient(top, rgba(252,252,252,1) 1%,rgba(234,234,234,1) 100%);
background: url('button_background_02.png') no-repeat 4px -39px, linear-gradient(top, rgba(252,252,252,1) 1%,rgba(234,234,234,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#eaeaea',GradientType=0 );
}
a.button:nth-of-type(2):hover {
color: #0087b0;
background-position: 4px 3px;
-webkit-box-shadow: inset 0 1px 6px #fff, 0 0 10px #ddd;
-moz-box-shadow: inset 0 1px 6px #fff, 0 0 10px #ddd;
box-shadow: inset 0 1px 6px #fff, 0 0 10px #ddd;
background: url('button_background_02.png') no-repeat 4px 3px, -moz-linear-gradient(top, rgba(252,252,252,1) 1%, rgba(234,234,234,1) 100%);
background: url('button_background_02.png') no-repeat 4px 3px, -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(252,252,252,1)), color-stop(100%,rgba(234,234,234,1)));
background: url('button_background_02.png') no-repeat 4px 3px, -webkit-linear-gradient(top, rgba(252,252,252,1) 1%,rgba(234,234,234,1) 100%);
background: url('button_background_02.png') no-repeat 4px 3px, -o-linear-gradient(top, rgba(252,252,252,1) 1%,rgba(234,234,234,1) 100%);
background: url('button_background_02.png') no-repeat 4px 3px, -ms-linear-gradient(top, rgba(252,252,252,1) 1%,rgba(234,234,234,1) 100%);
background: url('button_background_02.png') no-repeat 4px 3px, linear-gradient(top, rgba(252,252,252,1) 1%,rgba(234,234,234,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#eaeaea',GradientType=0 );
}
/* 3 */
a.button:nth-of-type(3) {
background-image: url('button_background_03b.png');
background-repeat: no-repeat;
background-position: 4px 4px;
background: rgb(252,252,252);
background: url('button_background_03b.png') no-repeat 4px 4px, -moz-linear-gradient(top, rgba(252,252,252,1) 1%, rgba(234,234,234,1) 100%);
background: url('button_background_03b.png') no-repeat 4px 4px, -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(252,252,252,1)), color-stop(100%,rgba(234,234,234,1)));
background: url('button_background_03b.png') no-repeat 4px 4px, -webkit-linear-gradient(top, rgba(252,252,252,1) 1%,rgba(234,234,234,1) 100%);
background: url('button_background_03b.png') no-repeat 4px 4px, -o-linear-gradient(top, rgba(252,252,252,1) 1%,rgba(234,234,234,1) 100%);
background: url('button_background_03b.png') no-repeat 4px 4px, -ms-linear-gradient(top, rgba(252,252,252,1) 1%,rgba(234,234,234,1) 100%);
background: url('button_background_03b.png') no-repeat 4px 4px, linear-gradient(top, rgba(252,252,252,1) 1%,rgba(234,234,234,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#eaeaea',GradientType=0 );
}
a.button:nth-of-type(3):hover {
color: #0087b0;
background-image: url('button_background_03a.png');
background-position: 4px 4px;
background: url('button_background_03a.png') no-repeat 4px 4px, -moz-linear-gradient(top, rgba(252,252,252,1) 1%, rgba(234,234,234,1) 100%);
background: url('button_background_03a.png') no-repeat 4px 4px, -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(252,252,252,1)), color-stop(100%,rgba(234,234,234,1)));
background: url('button_background_03a.png') no-repeat 4px 4px, -webkit-linear-gradient(top, rgba(252,252,252,1) 1%,rgba(234,234,234,1) 100%);
background: url('button_background_03a.png') no-repeat 4px 4px, -o-linear-gradient(top, rgba(252,252,252,1) 1%,rgba(234,234,234,1) 100%);
background: url('button_background_03a.png') no-repeat 4px 4px, -ms-linear-gradient(top, rgba(252,252,252,1) 1%,rgba(234,234,234,1) 100%);
background: url('button_background_03a.png') no-repeat 4px 4px, linear-gradient(top, rgba(252,252,252,1) 1%,rgba(234,234,234,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#eaeaea',GradientType=0 );
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment