Mysidia Adoptables Support Forum  

Home Community Mys-Script Creative Off-Topic
Go Back   Mysidia Adoptables Support Forum > Creative Discussion > Programming and Game Development

Reply
 
Thread Tools Display Modes
  #1  
Old 01-08-2015, 08:40 PM
Kyttias's Avatar
Kyttias Kyttias is offline
Premium Member
 
Join Date: Jan 2014
Posts: 840
Gender: Unknown/Other
Credits: 35,111
Kyttias is on a distinguished road
Arrow CSS Freebies

These will be absolutely free to use in any project, not just Mysidia-related ones!

I'll add stuff every now and then, but, to start, buttons:

Buttons [ live preview ]
  Spoiler: HTML & CSS 

HTML:
HTML Code:
<!-- Buttons can, of course, be done in two ways! -->
  <button class="btn-blue">Blue</button>
  <input type="button" class="btn-blue" value="Blue"/>
  
<!-- But you can also do this, thanks to CSS (btn class): -->
  <a href="#" class="btn btn-blue">Blue</a>

<!-- Anyway, for blue: -->
  <button class="btn-blue">Blue</button>
  <button class="btn-blue s1">Blue</button>
  <button class="btn-blue s2">Blue</button>
  <button class="btn-blue s3">Blue</button> 
  <button class="btn-blue s4">Blue</button>
  <button class="btn-blue s5">Blue</button>
  <button class="btn-blue s6">Blue</button>
CSS:
HTML Code:
.btn, button, input[type="button"] {
  padding: 10px 15px;
  margin: 2px 2px;
  cursor: default;
  color: buttontext;
  text-decoration: none;
  font-size: .8em;
  font-family: Verdana,Helvetica,Arial,sans-serif;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
  border: 2px outset buttonface;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  transition-duration: 0.2s;
}

.s1 {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.s2 {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.s3 {
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
}

.s4 {
-webkit-border-radius: 15px;
-webkit-border-top-left-radius: 50px;
-webkit-border-bottom-right-radius: 50px;
-moz-border-radius: 15px;
-moz-border-radius-topleft: 50px;
-moz-border-radius-bottomright: 50px;
border-radius: 15px;
border-top-left-radius: 50px;
border-bottom-right-radius: 50px;
}

.s5 {
  -webkit-border-top-right-radius: 20px;
  -webkit-border-bottom-right-radius: 20px;
  -moz-border-radius-topright: 20px;
  -moz-border-radius-bottomright: 20px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}

.s6 {
  -ms-transform: skew(-15deg);
  -webkit-transform: skew(-15deg);
  transform: skew(-15deg);
  
}

/* pink */
.btn-pink {
  background-color: #DC879C;
  border: 1px outset #C7586F;
  color: #f9f9f9;
}

.btn-pink:hover {
  cursor: pointer;
  background-color: #C7586F;
  border: 1px outset #DC879C;
  outline: 0;
}

.btn-pink:active{
  -webkit-box-shadow: inset 0px 1px 3px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: inset 0px 1px 3px 2px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0px 1px 3px 2px rgba(0, 0, 0, 0.2);
}

.btn-pink:focus {
  background-color: #DC879C;
  outline: 0;
}

/* fairy */
.btn-fairy {
  background-color: #FCABB9;
  border: 1px outset #EA8AB3;
  color: #f9f9f9;
}

.btn-fairy:hover {
  cursor: pointer;
  background-color: #EA8AB3;
  border: 1px outset #FCABB9;
  outline: 0;
}

.btn-fairy:active{
  -webkit-box-shadow: inset 0px 1px 3px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: inset 0px 1px 3px 2px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0px 1px 3px 2px rgba(0, 0, 0, 0.2);
}

.btn-fairy:focus {
  background-color: #FCABB9;
  outline: 0;
}

/* royal */
.btn-royal {
  background-color: #8E62A2;
  border: 1px outset #5C446A;
  color: #f9f9f9;
}

.btn-royal:hover {
  cursor: pointer;
  background-color: #5C446A;
  border: 1px outset #8E62A2;
  outline: 0;
}

.btn-royal:active{
  -webkit-box-shadow: inset 0px 1px 3px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: inset 0px 1px 3px 2px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0px 1px 3px 2px rgba(0, 0, 0, 0.2);
}

.btn-royal:focus {
  background-color: #8E62A2;
  outline: 0;
}

/* fire */
.btn-fire {
  background-color: #F09B28;
  border: 1px outset #E45010;
  color: #f9f9f9;
}

.btn-fire:hover {
  cursor: pointer;
  background-color: #E45010;
  border: 1px outset #F09B28;
  outline: 0;
}

.btn-fire:active{
  -webkit-box-shadow: inset 0px 1px 3px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: inset 0px 1px 3px 2px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0px 1px 3px 2px rgba(0, 0, 0, 0.2);
}

.btn-fire:focus {
  background-color: #F09B28;
  outline: 0;
}

/* blue */
.btn-blue {
  background-color: #427DB9;
  border: 1px outset #334688;
  color: #f9f9f9;
}

.btn-blue:hover {
  cursor: pointer;
  background-color: #334688;
  border: 1px outset #427DB9;
  outline: 0;
}

.btn-blue:active{
  -webkit-box-shadow: inset 0px 1px 3px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: inset 0px 1px 3px 2px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0px 1px 3px 2px rgba(0, 0, 0, 0.2);
}

.btn-blue:focus {
  background-color: #427DB9;
  outline: 0;
}

/* electric */
.btn-electric {
  background-color: #4EBBC0;
  border: 1px outset #4AA3B3;
  color: #f9f9f9;
}

.btn-electric:hover {
  cursor: pointer;
  background-color: #4AA3B3;
  border: 1px outset #4EBBC0;
  outline: 0;
}

.btn-electric:active{
  -webkit-box-shadow: inset 0px 1px 3px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: inset 0px 1px 3px 2px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0px 1px 3px 2px rgba(0, 0, 0, 0.2);
}

.btn-electric:focus {
  background-color: #4EBBC0;
  outline: 0;
}

/* red */
.btn-red {
  background-color: #CB3A3E;
  border: 1px outset #AC4043;
  color: #f9f9f9;
}

.btn-red:hover {
  cursor: pointer;
  background-color: #AC4043;
  border: 1px outset #CB3A3E;
  outline: 0;
}

.btn-red:active{
  -webkit-box-shadow: inset 0px 1px 3px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: inset 0px 1px 3px 2px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0px 1px 3px 2px rgba(0, 0, 0, 0.2);
}

.btn-red:focus {
  background-color: #CB3A3E;
  outline: 0;
}

/* grass */
.btn-grass {
  background-color: #31D56A;
  border: 1px outset #32C294;
  color: #f9f9f9;
}

.btn-grass:hover {
  cursor: pointer;
  background-color: #32C294;
  border: 1px outset #31D56A;
  outline: 0;
}

.btn-grass:active{
  -webkit-box-shadow: inset 0px 1px 3px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: inset 0px 1px 3px 2px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0px 1px 3px 2px rgba(0, 0, 0, 0.2);
}

.btn-grass:focus {
  background-color: #31D56A;
  outline: 0;
}

/* olive */
.btn-olive {
  background-color: #87AB34;
  border: 1px outset #6B8D38;
  color: #f9f9f9;
}

.btn-olive:hover {
  cursor: pointer;
  background-color: #6B8D38;
  border: 1px outset #87AB34;
  outline: 0;
}

.btn-olive:active{
  -webkit-box-shadow: inset 0px 1px 3px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: inset 0px 1px 3px 2px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0px 1px 3px 2px rgba(0, 0, 0, 0.2);
}

.btn-olive:focus {
  background-color: #87AB34;
  outline: 0;
}


(If you'd like help adding a class to specific buttons inside the Mysidia framework, I'll see if I can help you make changes to the code as needed. ^^)
__________________
Please do not contact me. I cannot offer tech support on any coding I've done prior to 2018.
Reply With Quote
  #2  
Old 01-10-2015, 11:54 PM
MikiHeart's Avatar
MikiHeart MikiHeart is offline
Premium Member
 
Join Date: Apr 2009
Posts: 187
Gender: Female
Credits: 7,112
MikiHeart
Default

I wanted to comment and say that these look amazing!
I don't think I have a use for them, but gosh they are great!
Reply With Quote
  #3  
Old 02-16-2016, 02:58 AM
Kyttias's Avatar
Kyttias Kyttias is offline
Premium Member
 
Join Date: Jan 2014
Posts: 840
Gender: Unknown/Other
Credits: 35,111
Kyttias is on a distinguished road
Default

Just made these, feel free to use them!
http://jsbin.com/nijizo/edit?html,css,output

Keep in mind that if you want to use this particular font but aren't familiar with how things like that work, the @import bit MUST come at the top of your ENTIRE css file. @import css properties must always come first, not just before they're needed, but before any css is actually loaded, even if it's not relevant to what needs it.
__________________
Please do not contact me. I cannot offer tech support on any coding I've done prior to 2018.

Last edited by Kyttias; 02-16-2016 at 10:51 AM.
Reply With Quote
  #4  
Old 02-18-2016, 05:48 PM
pachoofoosh's Avatar
pachoofoosh pachoofoosh is offline
Artist
 
Join Date: Dec 2012
Location: New York
Posts: 95
Gender: Unknown/Other
Credits: 5,707
pachoofoosh is on a distinguished road
Default

Ahhh these are really nice, the join now buttons look so cool.
__________________
The calzones... betrayed me?
Reply With Quote
Reply

Tags
buttons, css

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT -5. The time now is 10:46 AM.

Currently Active Users: 206 (1 members and 205 guests)
Threads: 3,932, Posts: 31,331, Members: 15,516
Welcome to our newest members, Nicholas Adam.
BER





What's New?

What's Hot?

What's Popular?


Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2018, vBulletin Solutions Inc.
vBCommerce I v2.0.0 Gold ©2010, PixelFX Studios
vBCredits I v2.0.0 Gold ©2010, PixelFX Studios
Emoticons by darkmoon3636