bestbuildpc: Forums
 

 Forum FAQForum FAQ   SearchSearch   UsergroupsUsergroups   ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 

19 Professional buttons
 
 
Post new topic   Reply to topic    bestbuildpc Forum Index -> RavenNuke -> Mods and Hacks
View previous topic :: View next topic  
Author Message
bestbuildpc
Site Admin
Site Admin


Joined: Jun 30, 2012
Posts: 214
Location: NL

PostPosted: Thu Nov 14, 2013 12:47    Post subject: 19 Professional buttons Reply with quote

Code:
<a href="#" data-text="Button 1" class="button button-1" >Button 1</a>

<style type="text/css">
.button-1 {
   font-weight: 400;
   outline: 0;
   padding: 8px 15px;
   text-align: center;
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;
   cursor: pointer;
   background-color: #09c;
   background-image: -webkit-gradient(linear, left top, left bottom, from(#2faddb), to(#09c));
   background-image: -webkit-linear-gradient(top, #2faddb, #09c);
   background-image: -moz-linear-gradient(top, #2faddb, #09c);
   background-image: -ms-linear-gradient(top, #2faddb, #09c);
   background-image: -o-linear-gradient(top, #2faddb, #09c);
   background-image: linear-gradient(top, #2faddb, #09c);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#2faddb', EndColorStr='#0099cc',GradientType=0);
   border: 1px solid #3990ab;
   color: #fff;
}
.button-1:hover {
   background-color: #61C6ED;
   background-image: -webkit-gradient(linear, left top, left bottom, from(#61C6ED), to(#61C6ED));
   background-image: -webkit-linear-gradient(top, #61C6ED, #61C6ED);
   background-image: -moz-linear-gradient(top, #61C6ED, #61C6ED);
   background-image: -ms-linear-gradient(top, #61C6ED, #61C6ED);
   background-image: -o-linear-gradient(top, #61C6ED, #61C6ED);
   background-image: linear-gradient(top, #61C6ED, #61C6ED);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#61C6ED', EndColorStr='##61C6ED',GradientType=0);
   border: 1px solid #6ABAD5;
   color: #fff;
}
.button-1:active {
   background-color: #09c;
   background-image: -webkit-gradient(linear, left top, left bottom, from(#0F6B8E), to(#0F6B8E));
   background-image: -webkit-linear-gradient(top, #0F6B8E, #0F6B8E);
   background-image: -moz-linear-gradient(top, #0F6B8E, #0F6B8E);
   background-image: -ms-linear-gradient(top, #0F6B8E, #0F6B8E);
   background-image: -o-linear-gradient(top, #0F6B8E, #0F6B8E);
   background-image: linear-gradient(top, #0F6B8E, #0F6B8E);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#0F6B8E', EndColorStr='#0F6B8E',GradientType=0);
   border: 1px solid #13586F;
   color: #fff;
}
</style>

<a href="#" data-text="Button 2" class="button button-2" >Button 1</a>
<style type="text/css">
.button-2 {
   color: #555;
   border: 1px solid #ccc;
   background: white;
   margin-right: 10px;
   border-radius: 1px;
   -webkit-border-radius: 1px;
   -moz-border-radius: 1px;
   box-shadow: 1px 1px 5px #EEE;
   -webkit-box-shadow: 1px 1px 5px #EEE;
   -moz-box-shadow: 1px 1px 5px #EEE;
   background: white;
   padding: 8px 15px;
   cursor: pointer;
}
.button-2:hover {
   background-color: #efefef;
   color: #555;
}
.button-2:active {
   background-color: #dddddd;
}
</style>

<a href="#" data-text="Button 3" class="button button-3" >Button 3</a>
<style type="text/css">
.button-3 {
   background-color: #400090;
   color: #fff;
   border-radius: 3px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   -webkit-font-smoothing: antialiased;
   border: 1px solid #6c4988;
   padding: 8px 15px;
   cursor: pointer;
}
.button-3:hover {
   background-color: #7432C8;
   color: #fff;
}
.button-3:active {
   background-color: #29005E;

}
</style>

<a href="#" data-text="Button 4" class="button button-4" >Button 4</a>
<style type="text/css">
.button-4 {
   cursor: pointer;
   background: #1ca5d5;
   padding: 9px 16px;
   color: #fff;
   -moz-border-radius: 1px;
   border-radius: 1px;
   -webkit-border-radius: 1px;
   text-decoration: none;
   border:none;
}
.button-4:hover {
   background: #52C4EA;
   color: #fff;
}
.button-4:active {
   background: #096A8A;
}
</style>

<a href="#" data-text="Button 5" class="button button-5" >Button 5</a>
<style type="text/css">
.button-5 {
   cursor: pointer;
   background-color: #fff;
   padding: 8px 15px;
   color: #bd0020;
   -moz-border-radius: 2px;
   border-radius: 2px;
   -webkit-box-shadow: 0px 2px 1px rgb(249,221,221);
   -moz-box-shadow: 0px 3px 1px rgb(249,221,221);
   box-shadow: 0px 2px 1px rgb(249,221,221);
   border: none;
}
.button-5:hover {
   background-color: rgba(249,221,221,0.3);
   color: #bd0020;
}
.button-5:active {
   background-color: rgba(249,221,221,0.5);
}
</style>

<a href="#" data-text="Button 6" class="button button-6" >Button 6</a>
<style type="text/css">
.button-6 {
   cursor: pointer;
   padding: 8px 15px;
   border: 1px solid #3079ed;
   color: #fff;
   text-shadow: 0 1px rgba(0,0,0,0.1);
   background-color: #4d90fe;
   background-image: -webkit-gradient(linear,left top,left bottom,from(#4d90fe),to(#4787ed));
   background-image: -webkit-linear-gradient(top,#4d90fe,#4787ed);
   background-image: -moz-linear-gradient(top,#4d90fe,#4787ed);
   background-image: -ms-linear-gradient(top,#4d90fe,#4787ed);
   background-image: -o-linear-gradient(top,#4d90fe,#4787ed);
   background-image: linear-gradient(top,#4d90fe,#4787ed);
}
.button-6:hover {
   background-color: #3079ed;
   background-image: none;
   color: #fff;
}
</style>

<a href="#" data-text="Button 7" class="button button-7" >Button 7</a>
<style type="text/css">
.button-7 {
   cursor: pointer;
   border: 2px solid #d14836;
   padding: 7px 14px;
   color: #fff;
   text-shadow: 0 1px rgba(0,0,0,0.1);
   background-color: #d14836;
   background-image: -webkit-gradient(linear,left top,left bottom,from(#dd4b39),to(#d14836));
   background-image: -webkit-linear-gradient(top,#dd4b39,#d14836);
   background-image: -moz-linear-gradient(top,#dd4b39,#d14836);
   background-image: -ms-linear-gradient(top,#dd4b39,#d14836);
   background-image: -o-linear-gradient(top,#dd4b39,#d14836);
   background-image: linear-gradient(top,#dd4b39,#d14836);
}
.button-7:hover {
   background-color: #d14836;
   color: #fff;
   background-image: none;
}
</style>

<a href="#" data-text="Button 8" class="button button-8" >Button 8</a>
<style type="text/css">
.button-8 {
   cursor: pointer;
   -webkit-box-shadow: 0 1px 0 rgba(0,0,0,.05);
   box-shadow: 0 1px 0 rgba(0,0,0,.05);
   background-color: #53a93f;
   border: 1px solid #53a93f;
   color: #fff;
   text-shadow: none;
   padding: 8px 15px;
}
.button-8:hover {
   border-color: #4c8534;
   color: #fff;
}
.button-8:active {
   background-color: #4c8534;
}
</style>

<a href="#" data-text="Button 9" class="button button-9" >Button 9</a>
<style type="text/css">
.button-9 {
   cursor: pointer;
   -webkit-box-shadow: 0 1px 0 rgba(0,0,0,.05);
   box-shadow: 0 1px 0 rgba(0,0,0,.05);
   background-color: #fff;
   color: #404040;
   border: 1px solid #d9d9d9;
   border: 1px solid rgba(0,0,0,.15);
   padding: 8px 15px;
}
.button-9:hover {
   border: 1px solid #b8b8b8;
   color: #404040;
}
.button-9:active {
   background-color: #efefef;
}
</style>

<a href="#" data-text="Button 10" class="button button-10" >Button 10</a>
<style type="text/css">
.button-10 {
   padding: 8px 15px;
   cursor: pointer;
   border: 1px solid #cccccc;
   border-radius: 4px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   color: #333333;
   background-color: #ffffff;
}
.button-10:hover {
   background-color: #efefef;
   color: #ffffff;
}
</style>

<a href="#" data-text="Button 11" class="button button-11" >Button 11</a>
<style type="text/css">
.button-11 {
   padding: 8px 15px;
   cursor: pointer;
   border: 1px solid #d43f3a;
   border-radius: 4px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   color: #ffffff;
   background-color: #d9534f;
}
.button-11:hover {
   background-color: #d43f3a;
   color: #ffffff;
}
</style>

<a href="#" data-text="Button 12" class="button button-12" >Button 12</a>
<style type="text/css">
.button-12 {
   padding: 8px 15px;
   cursor: pointer;
   border: 1px solid #4cae4c;
   border-radius: 4px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   color: #ffffff;
   background-color: #5cb85c;
}
.button-12:hover {
   background-color: #4cae4c;
   color: #ffffff;
}
</style>

<a href="#" data-text="Button 13" class="button button-13" >Button 13</a>
<style type="text/css">
.button-13 {
   padding: 8px 15px;
   cursor: pointer;
   border: 1px solid #18bc9c;
   border-radius: 4px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   color: #ffffff;
   background-color: #18bc9c;
}
.button-13:hover {
   background-color: #318D7B;
   border-color: #087A64;
   color: #ffffff;
}
</style>

<a href="#" data-text="Button 14" class="button button-14" >Button 14</a>
<style type="text/css">
.button-14 {
   padding: 8px 15px;
   cursor: pointer;
   border: 1px solid #2c3e50;
   border-radius: 4px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   color: #ffffff;
   background-color: #2c3e50;
}
.button-14:hover {
   background-color: #28323C;
   border-color: #0E2134;
   color: #ffffff;
}
</style>

<a href="#" data-text="Button 15" class="button button-15" >Button 15</a>
<style type="text/css">
.button-15 {
   padding: 8px 15px;
   cursor: pointer;
   border: 1px solid #73a839;
   border-radius: 4px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   color: #ffffff;
   background-color: #73a839;
   padding: 8px 15px;
   cursor: pointer;
   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#88c149), color-stop(60%, #73a839), to(#699934));
   background-image: -webkit-linear-gradient(#88c149, #73a839 60%, #699934);
   background-image: -moz-linear-gradient(top, #88c149, #73a839 60%, #699934);
   background-image: linear-gradient(#88c149, #73a839 60%, #699934);
   background-repeat: no-repeat;
   border-bottom: 1px solid #59822c;
}
.button-15:hover {
   background-image: none;
   color: #ffffff;
}
.button-15:active {
   background-image: none;
   background-color: #59822c;
}
</style>

<a href="#" data-text="Button 16" class="button button-16" >Button 16</a>
<style type="text/css">
.button-16 {
   padding: 8px 15px;
   cursor: pointer;
   border: 1px solid #033c73;
   border-radius: 4px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   color: #ffffff;
   background-color: #033c73;
   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#04519b), color-stop(60%, #033c73), to(#02325f));
   background-image: -webkit-linear-gradient(#04519b, #033c73 60%, #02325f);
   background-image: -moz-linear-gradient(top, #04519b, #033c73 60%, #02325f);
   background-image: linear-gradient(#04519b, #033c73 60%, #02325f);
   background-repeat: no-repeat;
   border-bottom: 1px solid #022241;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff04519b', endColorstr='#ff02325f', GradientType=0);
}
.button-16:hover {
   background-image: none;
   color: #ffffff;
}
</style>

<a href="#" data-text="Button 17" class="button button-17" >Button 17</a>
<style type="text/css">
.button-17 {
   padding: 8px 15px;
   cursor: pointer;
   color: #ffffff;
   background-color: #c71c22;
   border: 1px solid #c71c22;
   border-radius: 4px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e12b31), color-stop(60%, #c71c22), to(#b5191f));
   background-image: -webkit-linear-gradient(#e12b31, #c71c22 60%, #b5191f);
   background-image: -moz-linear-gradient(top, #e12b31, #c71c22 60%, #b5191f);
   background-image: linear-gradient(#e12b31, #c71c22 60%, #b5191f);
   background-repeat: no-repeat;
   border-bottom: 1px solid #9a161a;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe12b31', endColorstr='#ffb5191f', GradientType=0);
}
.button-17:hover {
   background-image: none;
   color: #ffffff;
}
</style>

<a href="#" data-text="Button 18" class="button button-18" >Button 18</a>
<style type="text/css">
.button-18 {
   padding: 8px 15px;
   cursor: pointer;
   color: #ffffff;
   background-color: #c71c22;
   border: 1px solid #c71c22;
   border-radius: 4px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
}
.button-18:hover {
   color: #ffffff;
}
</style>

<a href="#" data-text="Button 19" class="button button-19" >Button 19</a>
<style type="text/css">
.button-19 {
   padding: 8px 15px;
   cursor: pointer;
   color: #333;
   background-color: #f6e312;
   border: 1px solid #e9ac1a;
   filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFF6E312', endColorstr='#FFF9C80D');
   background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f6e312), color-stop(100%, #f9c80d));
   background-image: -webkit-linear-gradient(top, #f6e312 0%,#f9c80d 100%);
   background-image: -moz-linear-gradient(top, #f6e312 0%,#f9c80d 100%);
   background-image: -o-linear-gradient(top, #f6e312 0%,#f9c80d 100%);
   background-image: linear-gradient(top, #f6e312 0%,#f9c80d 100%);
}
.button-19:hover {
   color: #333;
}
</style>

You can use a basic formatting that was common to all of the buttons
<style type="text/css">
.button {
   text-decoration: none;
   display: inline-block;
   color: #fff;
   font-family: 'Helvetica Neue', helvetica, sans-serif;
   font-size: 12px;
   margin: 5px;
}
.button:hover {
   text-decoration: none;
}
</style>
  
Back to top
View user's profile Send private message Visit poster's website
Display posts from previous:       
Post new topic   Reply to topic    bestbuildpc Forum Index -> RavenNuke -> Mods and Hacks All times are GMT + 2 Hours
 
 Page 1 of 1

 

Jump to:   
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
You cannot attach files in this forum
You cannot download files in this forum

Powered by phpBB © 2001-2008 phpBB Group
 
Forums ©