Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

readme update

  • Loading branch information...
commit 77bde1b4174935241384f770a38b5f71c4015a00 1 parent ab4b949
Stu Basden authored
Showing with 69 additions and 311 deletions.
  1. +0 −311 README
  2. +69 −0 README.md
311 README
View
@@ -1,311 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
- <title>Just some other awesome CSS3 buttons - demo</title>
- <meta charset="utf-8">
- <style>
- body
- {
- margin: 0;
- }
- #buttonContainer {
- text-align:center;
- }
- #author-info {
- float:right;
- width:30%;
- margin:0 0 1em 2em;
- }
-
- .button
- {
- display: inline-block;
- white-space: nowrap;
- background-color: #ddd;
- background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
- background-image: -webkit-linear-gradient(top, #eee, #ccc);
- background-image: -moz-linear-gradient(top, #eee, #ccc);
- background-image: -ms-linear-gradient(top, #eee, #ccc);
- background-image: -o-linear-gradient(top, #eee, #ccc);
- background-image: linear-gradient(top, #eee, #ccc);
- border: 1px solid #777;
- padding: 0 1.5em;
- margin: 0.5em;
- font: bold 1em/2em Arial, Helvetica;
- text-decoration: none;
- color: #333;
- text-shadow: 0 1px 0 rgba(255,255,255,.8);
- -moz-border-radius: .2em;
- -webkit-border-radius: .2em;
- border-radius: .2em;
- -moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
- -webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
- box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
- }
-
- .button:hover
- {
- background-color: #eee;
- background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#ddd));
- background-image: -webkit-linear-gradient(top, #fafafa, #ddd);
- background-image: -moz-linear-gradient(top, #fafafa, #ddd);
- background-image: -ms-linear-gradient(top, #fafafa, #ddd);
- background-image: -o-linear-gradient(top, #fafafa, #ddd);
- background-image: linear-gradient(top, #fafafa, #ddd);
- }
-
- .button:active
- {
- -moz-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
- -webkit-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
- box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
- position: relative;
- top: 1px;
- }
-
- .button:focus
- {
- outline: 0;
- background: #fafafa;
- }
-
- .button:before
- {
- background: #ccc;
- background: rgba(0,0,0,.1);
- float: left;
- width: 1em;
- text-align: center;
- font-size: 1.5em;
- margin: 0 1em 0 -1em;
- padding: 0 .2em;
- -moz-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
- -webkit-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
- box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
- -moz-border-radius: .15em 0 0 .15em;
- -webkit-border-radius: .15em 0 0 .15em;
- border-radius: .15em 0 0 .15em;
- pointer-events: none;
- }
-
- /* Buttons and inputs */
-
- button.button, input.button
- {
- cursor: pointer;
- overflow: visible; /* removes extra side spacing in IE */
- }
-
- /* removes extra inner spacing in Firefox */
- button::-moz-focus-inner
- {
- border: 0;
- padding: 0;
- }
-
- /* If line-height can't be modified, then fix Firefox spacing with padding */
- input::-moz-focus-inner
- {
- padding: .4em;
- }
-
- /* The disabled styles */
- .button[disabled], .button[disabled]:hover, .button.disabled, .button.disabled:hover
- {
- background: #eee;
- color: #aaa;
- border-color: #aaa;
- cursor: default;
- text-shadow: none;
- position: static;
- -moz-box-shadow: none;
- -webkit-box-shadow: none;
- box-shadow: none;
- }
-
- /* Hexadecimal entities for the icons */
-
- .add:before
- {
- content: "\271A";
- }
-
- .edit:before
- {
- content: "\270E";
- }
-
- .delete:before
- {
- content: "\2718";
- }
-
- .save:before
- {
- content: "\2714";
- }
-
- .email:before
- {
- content: "\2709";
- }
-
- .like:before
- {
- content: "\2764";
- }
-
- .next:before
- {
- content: "\279C";
- }
-
- .star:before
- {
- content: "\2605";
- }
-
- .spark:before
- {
- content: "\2737";
- }
-
- .play:before
- {
- content: "\25B6";
- }
-
-
- /* Social media buttons */
- .tw, .fb,
- .tw:hover, .fb:hover
- {
- background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.5)), to(rgba(255,255,255,0)));
- background-image: -webkit-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
- background-image: -moz-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
- background-image: -ms-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
- background-image: -o-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
- background-image: linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
- }
-
- .tw, .tw:focus
- {
- background-color: #88E1E6;
- }
-
- .fb, .fb:focus
- {
- background-color: #3C5A98;
- color: #fff;
- text-shadow: 0 1px 0 rgba(0,0,0,.4);
- }
-
- .tw:hover
- {
- background-color: #b1f0f3;
- }
-
- .fb:hover
- {
- background-color: #879bc3;
- }
-
- .tw:before
- {
- content: "t";
- background: #91cfd3;
- background: rgba(0,0,0,.1);
- color: #fff;
- font-family: verdana;
- text-shadow: 0 1px 0 rgba(0,0,0,.4);
- }
-
- .fb:before
- {
- content: "f";
- background: #4467ac;
- background: rgba(0,0,0,.1);
- color: #fff;
- text-shadow: 0 1px 0 rgba(0,0,0,.4);
- }
-
- </style>
-</head>
-
-<body>
-
- <br><br>
- <h2>Just some other awesome CSS3 buttons</h2>
- <p>Whether you’re designing a website or a web application, you’ll need buttons for it. Now, with CSS3′s help, it was never easier to create nice looking buttons.</p>
- <div id="author-info">
- <div id="author-bio">
- <h4>Written by <a rel="external" title="Visit Red’s website" href="http://www.red-team-design.com">Red</a></h4>
- <p>Catalin Rosu, a.k.a Red, is a professional web designer and developer who loves to be creative and enjoys CSS techniques.
- Stay tuned for latest updates, <a href="http://feeds.feedburner.com/redteamdesign"><b>subscribe to RSS</b></a> and <a href="http://www.twitter.com/catalinred"><b>follow him on Twitter</b></a>.
- </p>
- </div>
- <p>The CSS has been copied to github without the author's permission, in order to create a backup and allow branching for colour themes and additions.</p>
- </div>
- <p>In order to create the icons, this set of CSS3 buttons uses <a href="http://en.wikipedia.org/wiki/Html_entity">HTML entities</a>.</p>
- <h3>Why use entities rather than images?</h3>
- <ul>
- <li>Faster loading, because we’re talking about text here.</li>
- <li>Scalable, depending on font size.</li>
- <li>Styles as color and background are easy to update via CSS.</li>
- </ul>
- <h4>Rendering &amp; browsers support</h4>
- <p>The icons are added using the <code>:before</code> <a title="The :before and :after pseudo-elements syntax" href="http://www.red-team-design.com/before-after-pseudo-elements">pseudo-element</a>. Therefore, you won’t see any icons in browsers like IE7 and below, but the buttons will look good yet.</p>
- <h3>Minimal markup</h3>
- <pre>
- &lt;a href="" class="button"&gt;Button&lt;/a&gt;
- </pre>
- <p><em>Simple button, with no icon.</em></p>
- <pre>
- &lt;a href="" class="button add"&gt;Add&lt;/a&gt;
- </pre>
- <p><em>Note the <code>add</code> class adds the plus icon.</em></p>
- <div id="buttonContainer">
- <h2>Actions</h2>
- <a href="" class="button">Button</a>
- <a href="" class="button add">Add</a>
- <a href="" class="button edit">Edit</a>
- <a href="" class="button delete">Delete</a>
- <a href="" class="button save">Save</a>
- <a href="" class="button email">Send email</a>
-
- <br><br>
-
- <h2>Miscellaneous</h2>
- <a href="" class="button like">Like</a>
- <a href="" class="button next">Next</a>
- <a href="" class="button star">Favourite</a>
- <a href="" class="button spark">Spark</a>
- <a href="" class="button play">Play</a>
-
- <br><br>
-
- <h2>Social media buttons</h2>
-
- <a href="http://twitter.com/catalinred" class="button tw">Follow me</a>
- <a href="http://www.facebook.com/RedTeamDesign" class="button fb">Become a fan</a>
-
-
- <h2>Buttons and inputs</h2>
-
- <button class="button">Clean button</button>
- <button class="button save">Button with icon</button>
- <button class="button" disabled>Disabled button</button>
- <button class="button save" disabled>Another disabled button</button>
-
- <br>
- <input class="button" type="submit" value="Input submit">
- <input class="button" type="button" value="Input button">
- <input class="button" type="submit" value="Input submit disabled" disabled>
- <input class="button" type="button" value="Input button disabled" disabled>
-
- <br><br>
- </div>
- <p>Go to the <a href="http://www.red-team-design.com/just-another-awesome-css3-buttons">article</a></p>
-</body>
-
-</html>
69 README.md
View
@@ -0,0 +1,69 @@
+## Just some other awesome CSS3 buttons
+
+Whether you’re designing a website or a web application, you’ll need buttons for it. Now, with CSS3′s help, it was never easier to create nice looking buttons.
+
+<div id="author-info">
+ <div id="author-bio">
+ <h4>
+ Written by <a rel="external" title="Visit Red’s website" href="http://www.red-team-design.com">Red</a>
+ </h4>
+
+ <p>
+ Catalin Rosu, a.k.a Red, is a professional web designer and developer who loves to be creative and enjoys CSS techniques. Stay tuned for latest updates, <a href="http://feeds.feedburner.com/redteamdesign"><b>subscribe to RSS</b></a> and <a href="http://www.twitter.com/catalinred"><b>follow him on Twitter</b></a>.
+ </p>
+ </div>
+
+ <p>
+ The CSS has been copied to github without the author's permission, in order to create a backup and allow branching for colour themes and additions.
+ </p>
+</div>
+
+In order to create the icons, this set of CSS3 buttons uses [HTML entities][1].
+
+### Why use entities rather than images?
+
+* Faster loading, because we’re talking about text here.
+* Scalable, depending on font size.
+* Styles as color and background are easy to update via CSS.
+
+#### Rendering & browsers support
+
+The icons are added using the `:before` [pseudo-element][2]. Therefore, you won’t see any icons in browsers like IE7 and below, but the buttons will look good yet.
+
+### Minimal markup
+
+<pre>&lt;a href="" class="button"&gt;Button&lt;/a&gt;
+ </pre>
+
+*Simple button, with no icon.*
+
+<pre>&lt;a href="" class="button add"&gt;Add&lt;/a&gt;
+ </pre>
+
+*Note the `add` class adds the plus icon.*
+
+<div id="buttonContainer">
+ <h2>
+ Actions
+ </h2>
+
+ <a href="" class="button">Button</a> <a href="" class="button add">Add</a> <a href="" class="button edit">Edit</a> <a href="" class="button delete">Delete</a> <a href="" class="button save">Save</a> <a href="" class="button email">Send email</a> <br /><br /> <h2>
+ Miscellaneous
+ </h2>
+
+ <a href="" class="button like">Like</a> <a href="" class="button next">Next</a> <a href="" class="button star">Favourite</a> <a href="" class="button spark">Spark</a> <a href="" class="button play">Play</a> <br /><br /> <h2>
+ Social media buttons
+ </h2>
+
+ <a href="http://twitter.com/catalinred" class="button tw">Follow me</a> <a href="http://www.facebook.com/RedTeamDesign" class="button fb">Become a fan</a> <h2>
+ Buttons and inputs
+ </h2>
+
+ <button class="button">Clean button</button> <button class="button save">Button with icon</button> <button class="button" disabled>Disabled button</button> <button class="button save" disabled>Another disabled button</button> <br /> <input class="button" type="submit" value="Input submit" /> <input class="button" type="button" value="Input button" /> <input class="button" type="submit" value="Input submit disabled" disabled /> <input class="button" type="button" value="Input button disabled" disabled /> <br /><br />
+</div>
+
+Go to the [article][3]
+
+ [1]: http://en.wikipedia.org/wiki/Html_entity
+ [2]: http://www.red-team-design.com/before-after-pseudo-elements "The :before and :after pseudo-elements syntax"
+ [3]: http://www.red-team-design.com/just-another-awesome-css3-buttons
Please sign in to comment.
Something went wrong with that request. Please try again.