<div class="container">
<div class="sixteen columns">
<h1 class="remove-bottom" style="margin-top: 40px">Blogger Butonlar</h1>
<h5>Version 1.0</h5>
<hr />
</div>
<div class="sixteen columns">
<p>Paylaşımlarımız son hızıyla devam ediyor <a href="http://www.mehmetklctas.com">Blogger Eklentileri</a>.</p>
<br />
</div>
<div class="four columns alpha">
<a class="btn-effect1 blue-btn" href="#">
<span class="media-left">
<img class="img-effect1" src="https://googledrive.com/host/0B54vO7qx7GPWS2dEb2gxYm9fb2s/img/social/twitter.png"/>
</span>
Twitter
<span class="tail-right"></span>
</a>
<a class="btn-effect1 darkblue-btn" href="#">
<span class="media-left">
<img class="img-effect1" src="https://googledrive.com/host/0B54vO7qx7GPWS2dEb2gxYm9fb2s/img/social/facebook.png"/>
</span>
Facebook
<span class="tail-right"></span>
</a>
<br />
<a class="btn-effect1 green-btn" href="#">
<span class="media-left">
<img class="img-effect1" src="https://googledrive.com/host/0B54vO7qx7GPWS2dEb2gxYm9fb2s/img/social/envato.png"/>
</span>
Envato
<span class="tail-right"></span>
</a>
<br />
<a class="btn-effect1 yellow-btn" href="#">
<span class="media-left">
<img class="img-effect1" src="https://googledrive.com/host/0B54vO7qx7GPWS2dEb2gxYm9fb2s/img/social/email.png"/>
</span>
Email Me
<span class="tail-right"></span>
</a>
<a class="btn-effect1 orange-btn" href="#">
<span class="media-left">
<img class="img-effect1" src="https://googledrive.com/host/0B54vO7qx7GPWS2dEb2gxYm9fb2s/img/social/rss.png"/>
</span>
RSS Feed
<span class="tail-right"></span>
</a>
<br />
<a class="btn-effect1 red-btn" href="#">
<span class="media-left">
<img class="img-effect1" src="https://googledrive.com/host/0B54vO7qx7GPWS2dEb2gxYm9fb2s/img/social/youtube.png"/>
</span>
Youtube
<span class="tail-right"></span>
</a>
<br />
<a class="btn-effect1 black-btn" href="#">
<span class="media-left">
<img class="img-effect1" src="https://googledrive.com/host/0B54vO7qx7GPWS2dEb2gxYm9fb2s/img/social/google+.png"/>
</span>
Google+
<span class="tail-right"></span>
</a>
</div>
<div class="four columns">
<a class="blue-btn" href="#">
Default Button
</a>
<br />
<a class="darkblue-btn" href="#">
Default Button
</a>
<br />
<a class="green-btn" href="#">
Default Button
</a>
<br />
<a class="yellow-btn" href="#">
Default Button
</a>
<br />
<a class="orange-btn" href="#">
Default Button
</a>
<br />
<a class="red-btn" href="#">
Default Button
</a>
<br />
<a class="black-btn" href="#">
Default Button
</a>
</div>
<div class="four columns">
<a class="btn-radius blue-btn" href="#">
Rounded Button
</a>
<br />
<a class="btn-radius darkblue-btn" href="#">
Rounded Button
</a>
<br />
<a class="btn-radius green-btn" href="#">
Rounded Button
</a>
<br />
<a class="btn-radius yellow-btn" href="#">
Rounded Button
</a>
<br />
<a class="btn-radius orange-btn" href="#">
Rounded Button
</a>
<br />
<a class="btn-radius red-btn" href="#">
Rounded Button
</a>
<br />
<a class="btn-radius black-btn" href="#">
Rounded Button
</a>
</div>
<div class="four columns">
<a class="btn-effect2 blue-btn" href="#">
<span class="tail-left"></span>
Twitter
<span class="media-right">
<img class="img-effect2" src="https://googledrive.com/host/0B54vO7qx7GPWS2dEb2gxYm9fb2s/img/social/twitter.png"/>
</span>
</a>
<br />
<a class="btn-effect2 darkblue-btn" href="#">
<span class="tail-left"></span>
Facebook
<span class="media-right">
<img class="img-effect2" src="https://googledrive.com/host/0B54vO7qx7GPWS2dEb2gxYm9fb2s/img/social/facebook.png"/>
</span>
</a>
<br />
<a class="btn-effect2 green-btn" href="#">
<span class="tail-left"></span>
Envato
<span class="media-right">
<img class="img-effect2" src="https://googledrive.com/host/0B54vO7qx7GPWS2dEb2gxYm9fb2s/img/social/envato.png"/>
</span>
</a>
<br />
<a class="btn-effect2 yellow-btn" href="#">
<span class="tail-left"></span>
Email Me
<span class="media-right">
<img class="img-effect2" src="https://googledrive.com/host/0B54vO7qx7GPWS2dEb2gxYm9fb2s/img/social/email.png"/>
</span>
</a>
<br />
<a class="btn-effect2 orange-btn" href="#">
<span class="tail-left"></span>
RSS Feed
<span class="media-right">
<img class="img-effect2" src="https://googledrive.com/host/0B54vO7qx7GPWS2dEb2gxYm9fb2s/img/social/rss.png"/>
</span>
</a>
<br />
<a class="btn-effect2 red-btn" href="#">
<span class="tail-left"></span>
Youtube
<span class="media-right">
<img class="img-effect2" src="https://googledrive.com/host/0B54vO7qx7GPWS2dEb2gxYm9fb2s/img/social/youtube.png"/>
</span>
</a>
<br />
<a class="btn-effect2 black-btn" href="#">
<span class="tail-left"></span>
Google+
<span class="media-right">
<img class="img-effect2" src="https://googledrive.com/host/0B54vO7qx7GPWS2dEb2gxYm9fb2s/img/social/google+.png"/>
</span>
</a>
</div>
</div>
<div class="container">
<div class="sixteen columns">.container { position: relative; width: 960px; margin: 0 auto; padding: 0; }
.container .column,
.container .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
.row { margin-bottom: 20px; }
/* Nested Column Classes */
.column.alpha, .columns.alpha { margin-left: 0; }
.column.omega, .columns.omega { margin-right: 0; }
/* Base Grid */
.container .one.column,
.container .one.columns { width: 40px; }
.container .two.columns { width: 100px; }
.container .three.columns { width: 160px; }
.container .four.columns { width: 220px; }
.container .five.columns { width: 280px; }
.container .six.columns { width: 340px; }
.container .seven.columns { width: 400px; }
.container .eight.columns { width: 460px; }
.container .nine.columns { width: 520px; }
.container .ten.columns { width: 580px; }
.container .eleven.columns { width: 640px; }
.container .twelve.columns { width: 700px; }
.container .thirteen.columns { width: 760px; }
.container .fourteen.columns { width: 820px; }
.container .fifteen.columns { width: 880px; }
.container .sixteen.columns { width: 940px; }
.container .one-third.column { width: 300px; }
.container .two-thirds.column { width: 620px; }
/* Offsets */
.container .offset-by-one { padding-left: 60px; }
.container .offset-by-two { padding-left: 120px; }
.container .offset-by-three { padding-left: 180px; }
.container .offset-by-four { padding-left: 240px; }
.container .offset-by-five { padding-left: 300px; }
.container .offset-by-six { padding-left: 360px; }
.container .offset-by-seven { padding-left: 420px; }
.container .offset-by-eight { padding-left: 480px; }
.container .offset-by-nine { padding-left: 540px; }
.container .offset-by-ten { padding-left: 600px; }
.container .offset-by-eleven { padding-left: 660px; }
.container .offset-by-twelve { padding-left: 720px; }
.container .offset-by-thirteen { padding-left: 780px; }
.container .offset-by-fourteen { padding-left: 840px; }
.container .offset-by-fifteen { padding-left: 900px; }
/* #Tablet (Portrait)
================================================== */
/* Note: Design for a width of 768px */
@media only screen and (min-width: 768px) and (max-width: 959px) {
.container { width: 768px; }
.container .column,
.container .columns { margin-left: 10px; margin-right: 10px; }
.column.alpha, .columns.alpha { margin-left: 0; margin-right: 10px; }
.column.omega, .columns.omega { margin-right: 0; margin-left: 10px; }
.alpha.omega { margin-left: 0; margin-right: 0; }
.container .one.column,
.container .one.columns { width: 28px; }
.container .two.columns { width: 76px; }
.container .three.columns { width: 124px; }
.container .four.columns { width: 172px; }
.container .five.columns { width: 220px; }
.container .six.columns { width: 268px; }
.container .seven.columns { width: 316px; }
.container .eight.columns { width: 364px; }
.container .nine.columns { width: 412px; }
.container .ten.columns { width: 460px; }
.container .eleven.columns { width: 508px; }
.container .twelve.columns { width: 556px; }
.container .thirteen.columns { width: 604px; }
.container .fourteen.columns { width: 652px; }
.container .fifteen.columns { width: 700px; }
.container .sixteen.columns { width: 748px; }
.container .one-third.column { width: 236px; }
.container .two-thirds.column { width: 492px; }
/* Offsets */
.container .offset-by-one { padding-left: 48px; }
.container .offset-by-two { padding-left: 96px; }
.container .offset-by-three { padding-left: 144px; }
.container .offset-by-four { padding-left: 192px; }
.container .offset-by-five { padding-left: 240px; }
.container .offset-by-six { padding-left: 288px; }
.container .offset-by-seven { padding-left: 336px; }
.container .offset-by-eight { padding-left: 384px; }
.container .offset-by-nine { padding-left: 432px; }
.container .offset-by-ten { padding-left: 480px; }
.container .offset-by-eleven { padding-left: 528px; }
.container .offset-by-twelve { padding-left: 576px; }
.container .offset-by-thirteen { padding-left: 624px; }
.container .offset-by-fourteen { padding-left: 672px; }
.container .offset-by-fifteen { padding-left: 720px; }
}
/* #Mobile (Portrait)
================================================== */
/* Note: Design for a width of 320px */
@media only screen and (max-width: 767px) {
.container { width: 300px; }
.container .columns,
.container .column { margin: 0; }
.container .one.column,
.container .one.columns,
.container .two.columns,
.container .three.columns,
.container .four.columns,
.container .five.columns,
.container .six.columns,
.container .seven.columns,
.container .eight.columns,
.container .nine.columns,
.container .ten.columns,
.container .eleven.columns,
.container .twelve.columns,
.container .thirteen.columns,
.container .fourteen.columns,
.container .fifteen.columns,
.container .sixteen.columns,
.container .one-third.column,
.container .two-thirds.column { width: 300px; }
/* Offsets */
.container .offset-by-one,
.container .offset-by-two,
.container .offset-by-three,
.container .offset-by-four,
.container .offset-by-five,
.container .offset-by-six,
.container .offset-by-seven,
.container .offset-by-eight,
.container .offset-by-nine,
.container .offset-by-ten,
.container .offset-by-eleven,
.container .offset-by-twelve,
.container .offset-by-thirteen,
.container .offset-by-fourteen,
.container .offset-by-fifteen { padding-left: 0; }
}
/* #Mobile (Landscape)
================================================== */
/* Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
.container { width: 420px; }
.container .columns,
.container .column { margin: 0; }
.container .one.column,
.container .one.columns,
.container .two.columns,
.container .three.columns,
.container .four.columns,
.container .five.columns,
.container .six.columns,
.container .seven.columns,
.container .eight.columns,
.container .nine.columns,
.container .ten.columns,
.container .eleven.columns,
.container .twelve.columns,
.container .thirteen.columns,
.container .fourteen.columns,
.container .fifteen.columns,
.container .sixteen.columns,
.container .one-third.column,
.container .two-thirds.column { width: 420px; }
}
/* #Clearing
================================================== */
/* Self Clearing Goodness */
.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
/* Use clearfix class on parent to clear nested columns,
or wrap each row of columns in a <div class="row"> */
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.row:after,
.clearfix:after {
clear: both; }
.row,
.clearfix {
zoom: 1; }
/* You can also use a <br class="clear" /> to clear columns */
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
@media only screen and (max-width: 959px) {}
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {}
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {}
/*Global Styles*/ /*Global Styles*/ /*Global Styles*/
*{margin:0; padding:0; border:0;}
body{ background-color:#f0f0f0;}
.wrapper{
width:960px;
margin:3% auto;
}
.intro{
font-family: 'Scada', sans-serif;
color:#646464;
}
p{
font-family: 'Scada', sans-serif;
color:#646464;
font-size: 12px;
}
h1{
font-family: 'Scada', sans-serif;
}
h3{
font-family: 'Scada', sans-serif;
color:#646464;
margin-top:10%;
}
h5{
font-family: 'Scada', sans-serif;
color:#646464;
}
hr{
width:100%;
height:2px;
background-color: #dddddd;
color:#dddddd;
border-color: #ffffff;
border-bottom-width: 1px;
border-left-width:0px;
border-right-width:0px;
border-top-width: 0px;
border-style: solid;
margin-top:1%;
margin-bottom: 1%;
}
/*Button Style */
a{text-decoration: none;}
a:hover{text-decoration: none;}
a:active{text-decoration: none;}
a:link{text-decoration: none;}
a:visited{text-decoration: none;}
/*Button Sizes/Types*/
.tail-right{
width: 0px;
height: 0px;
border-style: solid;
border-width: 18px 20px 18px 0;
border-color: transparent #f0f0f0 transparent transparent; /*Replace #f0f0f0 with your background color*/
position: absolute;
left:167px;
}
.tail-left{
width: 0px;
height: 0px;
border-style: solid;
border-width: 18px 0 20px 18px;
border-color: transparent transparent transparent #f0f0f0; /*Replace #f0f0f0 with your background color*/
position: absolute;
left:-1px;
}
.btn-radius{border-radius: 5px;}
.media-left{
position: absolute;
left: 8px;
top:6px;
}
.media-right{
position: absolute;
left: 160px;
top:6px;
}
.blue-btn{
margin-top:30px;
width:150px;
height:34px;
position: relative;
border: 1px solid #2f78a9;
background-color: #3b9ddd;
box-shadow: inset 0 1px 1px #82cdff;
box-shadow: inset 0 1px 1px #82cdff;
box-shadow: inset 0 1px 1px #82cdff;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzMzODViYyIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNkOWVkZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+);
background-image: linear-gradient(bottom, #3385bc 0%, #3d9ede 100%);
background-image: linear-gradient(bottom, #3385bc 0%, #3d9ede 100%);
background-image: linear-gradient(bottom, #3385bc 0%, #3d9ede 100%);
background-image: linear-gradient(bottom, #3385bc 0%, #3d9ede 100%);
margin-right:1%;
cursor:pointer;
line-height: 33px;
font-size: 14px;
padding:0px 18px;
color: white;
font-family:sans-serif;
text-shadow: 0 1px 1px rgba(0,0,0,.75);
text-align: center;
display:inline-block;
margin-top:1.5%;
margin-bottom:1.5%;
}
.blue-btn:hover{
border: 1px solid #2f78a9;
background: #3b9ddd;
box-shadow: inset 0 1px 1px #82cdff;
box-shadow: inset 0 1px 1px #82cdff;
box-shadow: inset 0 1px 1px #82cdff;
}
.blue-btn:focus{
border: 1px solid #2f78a9;
background-color: #3999d7;
box-shadow: inset 0 1px 1px #3282b7;
box-shadow: inset 0 1px 1px #3282b7;
box-shadow: inset 0 1px 1px #3282b7;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzMzODViYyIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNkOWVkZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+);
background-image: linear-gradient(bottom, #3385bc 0%, #3d9ede 100%);
background-image: linear-gradient(bottom, #3385bc 0%, #3d9ede 100%);
background-image: linear-gradient(bottom, #3385bc 0%, #3d9ede 100%);
background-image: linear-gradient(bottom, #3385bc 0%, #3d9ede 100%);
}
.darkblue-btn{
margin-top:30px;
width:150px;
height:34px;
position: relative;
border: 1px solid #216592; /* stroke */
background-color: #2779af; /* layer fill content */
box-shadow: inset 0 1px 1px #2c8ccb; /* inner shadow */
box-shadow: inset 0 1px 1px #2c8ccb; /* inner shadow */
box-shadow: inset 0 1px 1px #2c8ccb; /* inner shadow */
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzIxNjY5NCIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzI3NzlhZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+); /* gradient overlay */
background-image: linear-gradient(bottom, #216694 0%, #2779af 100%); /* gradient overlay */
background-image: linear-gradient(bottom, #216694 0%, #2779af 100%); /* gradient overlay */
background-image: linear-gradient(bottom, #216694 0%, #2779af 100%); /* gradient overlay */
background-image: linear-gradient(bottom, #216694 0%, #2779af 100%); /* gradient overlay */
margin-right:1%;
cursor:pointer;
line-height: 33px;
font-size: 14px;
padding:0px 18px;
color: white;
font-family:sans-serif;
text-shadow: 0 1px 1px rgba(0,0,0,.75);
text-align: center;
display:inline-block;
margin-top:1.5%;
margin-bottom:1.5%;
}
.darkblue-btn:hover{
border: 1px solid #216592; /* stroke */
background: #2779af; /* layer fill content */
box-shadow: inset 0 1px 1px #2c8ccb; /* inner shadow */
box-shadow: inset 0 1px 1px #2c8ccb; /* inner shadow */
box-shadow: inset 0 1px 1px #2c8ccb; /* inner shadow */
}
.darkblue-btn:focus{
border: 1px solid #216592; /* stroke */
background-color: #2779af; /* layer fill content */
box-shadow: inset 0 1px 1px #216795; /* inner shadow */
box-shadow: inset 0 1px 1px #216795; /* inner shadow */
box-shadow: inset 0 1px 1px #216795; /* inner shadow */
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzIxNjY5NCIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzI3NzlhZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+); /* gradient overlay */
background-image: linear-gradient(bottom, #216694 0%, #2779af 100%); /* gradient overlay */
background-image: linear-gradient(bottom, #216694 0%, #2779af 100%); /* gradient overlay */
background-image: linear-gradient(bottom, #216694 0%, #2779af 100%); /* gradient overlay */
background-image: linear-gradient(bottom, #216694 0%, #2779af 100%); /* gradient overlay */
}
.orange-btn{
margin-top:30px;
width:150px;
height:36px;
position: relative;
border: 1px solid #cb5b0b; /* stroke */
background-color: #cc651b; /* layer fill content */
box-shadow: inset 0 1px 1px #fd9248; /* inner shadow */
box-shadow: inset 0 1px 1px #fd9248; /* inner shadow */
box-shadow: inset 0 1px 1px #fd9248; /* inner shadow */
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2QyNWUwZCIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2U0NmMxNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+); /* gradient overlay */
background-image: linear-gradient(bottom, #d25e0d 0%, #e46c17 100%); /* gradient overlay */
background-image: linear-gradient(bottom, #d25e0d 0%, #e46c17 100%); /* gradient overlay */
background-image: linear-gradient(bottom, #d25e0d 0%, #e46c17 100%); /* gradient overlay */
background-image: linear-gradient(bottom, #d25e0d 0%, #e46c17 100%); /* gradient overlay */
margin-right:1%;
cursor:pointer;
line-height: 33px;
font-size: 14px;
padding:0px 18px;
color: white;
font-family:sans-serif;
text-shadow: 0 1px 1px rgba(0,0,0,.75);
text-align: center;
display:inline-block;
margin-top:1.5%;
margin-bottom:1.5%;
}
.orange-btn:hover{
border: 1px solid #cb5b0b; /* stroke */
background-color: #cc651b; /* layer fill content */
box-shadow: inset 0 1px 1px #fd9248; /* inner shadow */
box-shadow: inset 0 1px 1px #fd9248; /* inner shadow */
box-shadow: inset 0 1px 1px #fd9248; /* inner shadow */
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2UzNmIxNyIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2U0NmMxNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+); /* gradient overlay */
background-image: linear-gradient(bottom, #e36b17 0%, #e46c17 100%); /* gradient overlay */
background-image: linear-gradient(bottom, #e36b17 0%, #e46c17 100%); /* gradient overlay */
background-image: linear-gradient(bottom, #e36b17 0%, #e46c17 100%); /* gradient overlay */
background-image: linear-gradient(bottom, #e36b17 0%, #e46c17 100%); /* gradient overlay */
}
.orange-btn:focus{
border: 1px solid #cb5b0b; /* stroke */
background-color: #cc651b; /* layer fill content */
box-shadow: inset 0 1px 1px #d1610f; /* inner shadow */
box-shadow: inset 0 1px 1px #d1610f; /* inner shadow */
box-shadow: inset 0 1px 1px #d1610f; /* inner shadow */
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2QyNWUwZCIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2U0NmMxNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+); /* gradient overlay */
background-image: linear-gradient(bottom, #d25e0d 0%, #e46c17 100%); /* gradient overlay */
background-image: linear-gradient(bottom, #d25e0d 0%, #e46c17 100%); /* gradient overlay */
background-image: linear-gradient(bottom, #d25e0d 0%, #e46c17 100%); /* gradient overlay */
background-image: linear-gradient(bottom, #d25e0d 0%, #e46c17 100%); /* gradient overlay */
}
.green-btn{
margin-top:30px;
width:150px;
height:36px;
position: relative;
border: 1px solid #1c9951;
background-color: #25bb65;
box-shadow: inset 0 1px 1px #2dda76;
box-shadow: inset 0 1px 1px #2dda76;
box-shadow: inset 0 1px 1px #2dda76;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlYTM1NiIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzI1YmI2NSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+);
background-image: linear-gradient(bottom, #1ea356 0%, #25bb65 100%);
background-image: linear-gradient(bottom, #1ea356 0%, #25bb65 100%);
background-image: linear-gradient(bottom, #1ea356 0%, #25bb65 100%);
background-image: linear-gradient(bottom, #1ea356 0%, #25bb65 100%);
margin-right:1%;
cursor:pointer;
line-height: 33px;
font-size: 14px;
padding:0px 18px;
color: white;
font-family:sans-serif;
text-shadow: 0 1px 1px rgba(0,0,0,.75);
text-align: center;
display:inline-block;
margin-top:1.5%;
margin-bottom:1.5%;
}
.green-btn:hover{
border: 1px solid #1c9951;
background: #25bb65;
box-shadow: inset 0 1px 1px #2dda76;
box-shadow: inset 0 1px 1px #2dda76;
box-shadow: inset 0 1px 1px #2dda76;
}
.green-btn:focus{
border: 1px solid #1c9951;
background-color: #25bb65;
box-shadow: inset 0 1px 1px #1d9850;
box-shadow: inset 0 1px 1px #1d9850;
box-shadow: inset 0 1px 1px #1d9850;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlYTM1NiIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzI1YmI2NSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+);
background-image: linear-gradient(bottom, #1ea356 0%, #25bb65 100%);
background-image: linear-gradient(bottom, #1ea356 0%, #25bb65 100%);
background-image: linear-gradient(bottom, #1ea356 0%, #25bb65 100%);
background-image: linear-gradient(bottom, #1ea356 0%, #25bb65 100%);
}
.yellow-btn{
margin-top:30px;
width:150px;
height:36px;
position: relative;
border: 1px solid #bf8b32;
background-color: #e5a941;
box-shadow: inset 0 1px 1px #fac05d;
box-shadow: inset 0 1px 1px #fac05d;
box-shadow: inset 0 1px 1px #fac05d;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2I5ODUyZSIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNjZDk2MzkiIHN0b3Atb3BhY2l0eT0iMSIvPgo8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNWE5NDEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICA8L2xpbmVhckdyYWRpZW50PgoKPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjaGF0MCkiIC8+Cjwvc3ZnPg==);
background-image: linear-gradient(bottom, #b9852e 0%, #cd9639 0%, #e5a941 100%);
background-image: linear-gradient(bottom, #b9852e 0%, #cd9639 0%, #e5a941 100%);
background-image: linear-gradient(bottom, #b9852e 0%, #cd9639 0%, #e5a941 100%);
background-image: linear-gradient(bottom, #b9852e 0%, #cd9639 0%, #e5a941 100%);
margin-right:1%;
cursor:pointer;
line-height: 33px;
font-size: 14px;
padding:0px 18px;
color: white;
font-family:sans-serif;
text-shadow: 0 1px 1px rgba(0,0,0,.75);
text-align: center;
display:inline-block;
margin-top:1.5%;
margin-bottom:1.5%;
}
.yellow-btn:hover{
border: 1px solid #bf8b32;
background: #e5a941;
box-shadow: inset 0 1px 1px #fac05d;
box-shadow: inset 0 1px 1px #fac05d;
box-shadow: inset 0 1px 1px #fac05d;
}
.yellow-btn:focus{
border: 1px solid #bf8b32;
background-color: #e5a941;
box-shadow: inset 0 1px 1px #ba8833;
box-shadow: inset 0 1px 1px #ba8833;
box-shadow: inset 0 1px 1px #ba8833;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2I5ODUyZSIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNjZDk2MzkiIHN0b3Atb3BhY2l0eT0iMSIvPgo8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNWE5NDEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICA8L2xpbmVhckdyYWRpZW50PgoKPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjaGF0MCkiIC8+Cjwvc3ZnPg==);
background-image: linear-gradient(bottom, #b9852e 0%, #cd9639 0%, #e5a941 100%);
background-image: linear-gradient(bottom, #b9852e 0%, #cd9639 0%, #e5a941 100%);
background-image: linear-gradient(bottom, #b9852e 0%, #cd9639 0%, #e5a941 100%);
background-image: linear-gradient(bottom, #b9852e 0%, #cd9639 0%, #e5a941 100%);
}
.red-btn{
margin-top:30px;
width:150px;
height:36px;
position: relative;
border: 1px solid #ac372b;
background-color: #c74337;
box-shadow: inset 0 1px 1px #ef5647;
box-shadow: inset 0 1px 1px #ef5647;
box-shadow: inset 0 1px 1px #ef5647;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2E0MzYyYiIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2M3NDMzNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+);
background-image: linear-gradient(bottom, #a4362b 0%, #c74337 100%);
background-image: linear-gradient(bottom, #a4362b 0%, #c74337 100%);
background-image: linear-gradient(bottom, #a4362b 0%, #c74337 100%);
background-image: linear-gradient(bottom, #a4362b 0%, #c74337 100%);
margin-right:1%;
cursor:pointer;
line-height: 33px;
font-size: 14px;
padding:0px 18px;
color: white;
font-family:sans-serif;
text-shadow: 0 1px 1px rgba(0,0,0,.75);
text-align: center;
display:inline-block;
margin-top:1.5%;
margin-bottom:1.5%;
}
.red-btn:hover{
border: 1px solid #ac372b;
background: #c74337;
box-shadow: inset 0 1px 1px #ef5647;
box-shadow: inset 0 1px 1px #ef5647;
box-shadow: inset 0 1px 1px #ef5647;
}
.red-btn:focus{
border: 1px solid #ac372b;
background-color: #c74337;
box-shadow: inset 0 1px 1px #963127;
box-shadow: inset 0 1px 1px #963127;
box-shadow: inset 0 1px 1px #963127;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2E0MzYyYiIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2M3NDMzNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+);
background-image: linear-gradient(bottom, #a4362b 0%, #c74337 100%);
background-image: linear-gradient(bottom, #a4362b 0%, #c74337 100%);
background-image: linear-gradient(bottom, #a4362b 0%, #c74337 100%);
background-image: linear-gradient(bottom, #a4362b 0%, #c74337 100%);
}
.black-btn{
margin-top:30px;
width:150px;
height:36px;
position: relative;
border: 1px solid #171616;
background-color: #282727;
box-shadow: inset 0 1px 1px #666;
box-shadow: inset 0 1px 1px #666;
box-shadow: inset 0 1px 1px #666;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzE3MTcxNyIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzI3MjcyNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+);
background-image: linear-gradient(bottom, #171717 0%, #272727 100%);
background-image: linear-gradient(bottom, #171717 0%, #272727 100%);
background-image: linear-gradient(bottom, #171717 0%, #272727 100%);
background-image: linear-gradient(bottom, #171717 0%, #272727 100%);
margin-right:1%;
cursor:pointer;
line-height: 33px;
font-size: 14px;
padding:0px 18px;
color: white;
font-family:sans-serif;
text-shadow: 0 1px 1px rgba(0,0,0,.75);
text-align: center;
display:inline-block;
margin-top:1.5%;
margin-bottom:1.8%;
}
.black-btn:hover{
border: 1px solid #171616;
background: #323232;
box-shadow: inset 0 1px 1px #666;
box-shadow: inset 0 1px 1px #666;
box-shadow: inset 0 1px 1px #666;
}
.black-btn:focus{
border: 1px solid #171616;
background-color: #282727;
box-shadow: inset 0 1px 1px #121111;
box-shadow: inset 0 1px 1px #121111;
box-shadow: inset 0 1px 1px #121111;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzE3MTcxNyIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzI3MjcyNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+);
background-image: linear-gradient(bottom, #171717 0%, #272727 100%);
background-image: linear-gradient(bottom, #171717 0%, #272727 100%);
background-image: linear-gradient(bottom, #171717 0%, #272727 100%);
background-image: linear-gradient(bottom, #171717 0%, #272727 100%);
}
/*Animated Social Buttons*/
.img-effect1{
transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
transform: rotate(0deg);
transform: rotate(0deg);
transform: rotate(0deg);
transform: rotate(0deg);
}
.btn-effect1:hover .img-effect1 {
transform: rotate(360deg);
transform: rotate(360deg);
transform: rotate(360deg);
transform: rotate(360deg);
}
.img-effect2{
transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
transform: rotate(0deg);
transform: rotate(0deg);
transform: rotate(0deg);
transform: rotate(0deg);
}
.btn-effect2:hover .img-effect2 {
transform: scale(0.5) rotate(360deg);
transform: scale(0.5) rotate(360deg);
transform: scale(0.5) rotate(360deg);
transform: scale(0.5) rotate(360deg);
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.