├── img └── bg.jpg ├── README.md ├── LICENSE ├── index.html └── ghost-buttons.css /img/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sixrevisions/css-ghost-buttons/HEAD/img/bg.jpg -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # CSS Ghost Buttons 2 | 3 | A collection of ghost buttons inspired by real-world examples. The source code is free and open source. 4 | 5 | ## Demo 6 | 7 | View the [Demo](http://cdn.sixrevisions.com/0468-01-css-ghost-buttons/index.html) to see the ghost buttons in action. The Demo showcases eight ghost button variations inspired by real-world examples. 8 | 9 | [![CSS Ghost Buttons demo page](http://cdn.sixrevisions.com/0468-13-ghost-button-demo.jpg)](http://cdn.sixrevisions.com/0468-01-css-ghost-buttons/index.html) 10 | 11 | ## How to Use 12 | 13 | Download [ghost-buttons.css](https://github.com/sixrevisions/css-ghost-buttons/blob/master/ghost-buttons.css) and then copy-and-paste the appropriate style rules in your project's CSS. Modify as needed to get the look and transistion effect you want. 14 | 15 | ## About 16 | 17 | This is a demo page for [a tutorial on Six Revisions](http://sixrevisions.com/css/ghost-buttons/). 18 | 19 | This was created by Jacob Gube [@sixrevisions](https://twitter.com/sixrevisions). 20 | 21 | The source files are free and unencumbered software released into the public domain; read the [LICENSE](https://github.com/sixrevisions/css-ghost-buttons/blob/master/LICENSE) file for more details. -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | This is free and unencumbered software released into the public domain. 2 | 3 | Anyone is free to copy, modify, publish, use, compile, sell, or 4 | distribute this software, either in source code form or as a compiled 5 | binary, for any purpose, commercial or non-commercial, and by any 6 | means. 7 | 8 | In jurisdictions that recognize copyright laws, the author or authors 9 | of this software dedicate any and all copyright interest in the 10 | software to the public domain. We make this dedication for the benefit 11 | of the public at large and to the detriment of our heirs and 12 | successors. We intend this dedication to be an overt act of 13 | relinquishment in perpetuity of all present and future rights to this 14 | software under copyright law. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 19 | IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR 20 | OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, 21 | ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 22 | OTHER DEALINGS IN THE SOFTWARE. 23 | 24 | For more information, please refer to 25 | 26 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CSS Ghost Buttons 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

17 | 18 |

CSS Ghost Buttons

19 |

Various ghost button styles and transition effects.

20 | 21 |

Basic Ghost Button

22 | View Tutorial 23 | 24 |

Rounded Corners

25 | View Tutorial 26 | 27 |

Simple Transition Effect

28 | View Tutorial 29 | 30 |

Thick Border

31 | View Tutorial 32 | 33 |

Semi-Transparent Fade

34 | View Tutorial 35 | 36 |

Border Color Fade

37 | View Tutorial 38 | 39 |

Full Color Fade

40 | View Tutorial 41 | 42 |

Size Transition Effect

43 | View Tutorial 44 | 45 |

46 | 47 | -------------------------------------------------------------------------------- /ghost-buttons.css: -------------------------------------------------------------------------------- 1 | /* CSS Reset */ 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | outline: none; 6 | font-size: 100%; 7 | font: inherit; 8 | vertical-align: baseline; 9 | } 10 | 11 | /* 12 | * Basic Ghost Button 13 | */ 14 | .ghost-button { 15 | display: inline-block; 16 | width: 200px; 17 | padding: 8px; 18 | color: #fff; 19 | border: 1px solid #fff; 20 | text-align: center; 21 | outline: none; 22 | text-decoration: none; 23 | } 24 | .ghost-button:hover, 25 | .ghost-button:active { 26 | background-color: #fff; 27 | color: #000; 28 | } 29 | 30 | /* 31 | * Rounded Corners 32 | */ 33 | .ghost-button-rounded-corners { 34 | display: inline-block; 35 | width: 200px; 36 | padding: 8px; 37 | color: #fff; 38 | border: 1px solid #fff; 39 | border-radius: 5px; 40 | text-align: center; 41 | outline: none; 42 | text-decoration: none; 43 | } 44 | .ghost-button-rounded-corners:hover, 45 | .ghost-button-rounded-corners:active { 46 | background-color: #fff; 47 | color: #000; 48 | } 49 | 50 | /* 51 | * Simple Transition Effect 52 | */ 53 | .ghost-button-transition { 54 | display: inline-block; 55 | width: 200px; 56 | padding: 8px; 57 | color: #fff; 58 | border: 2px solid #fff; 59 | text-align: center; 60 | outline: none; 61 | text-decoration: none; 62 | -webkit-transition: background-color 0.2s ease-out, color 0.2s ease-out; 63 | transition: background-color 0.2s ease-out, 64 | color 0.2s ease-out; 65 | } 66 | .ghost-button-transition:hover, 67 | .ghost-button-transition:active { 68 | background-color: #fff; 69 | color: #000; 70 | -webkit-transition: background-color 0.3s ease-in, color 0.3s ease-in; 71 | transition: background-color 0.3s ease-in, 72 | color 0.3s ease-in; 73 | } 74 | 75 | /* 76 | * Thick Border 77 | */ 78 | .ghost-button-thick-border { 79 | display: inline-block; 80 | width: 200px; 81 | font-weight: bold; 82 | padding: 8px; 83 | color: #fff; 84 | border: 3px solid #fff; 85 | text-align: center; 86 | outline: none; 87 | text-decoration: none; 88 | -webkit-transition: background-color 0.2s ease-out, color 0.2s ease-out; 89 | transition: background-color 0.2s ease-out, 90 | color 0.2s ease-out; 91 | } 92 | .ghost-button-thick-border:hover, 93 | .ghost-button-thick-border:active { 94 | background-color: #fff; 95 | color: #000; 96 | -webkit-transition: background-color 0.3s ease-in, color 0.3s ease-in; 97 | transition: background-color 0.3s ease-in, 98 | color 0.3s ease-in; 99 | } 100 | 101 | /* 102 | * Semi-Transparent Fade 103 | */ 104 | .ghost-button-semi-transparent { 105 | display: inline-block; 106 | width: 200px; 107 | padding: 8px; 108 | color: #fff; 109 | border: 2px solid #fff; 110 | text-align: center; 111 | outline: none; 112 | text-decoration: none; 113 | -webkit-transition: background-color 0.2s ease-out, border-color 0.2s ease-out; 114 | transition: background-color 0.2s ease-out, 115 | border-color 0.2s ease-out; 116 | } 117 | .ghost-button-semi-transparent:hover, 118 | .ghost-button-semi-transparent:active { 119 | background-color: #fff; /* fallback */ 120 | background-color: rgba(255, 255, 255, 0.4); 121 | border-color: #fff; /* fallback */ 122 | border-color: rgba(255, 255, 255, 0.4); 123 | -webkit-transition: background-color 0.3s ease-in, border-color 0.3s ease-in; 124 | transition: background-color 0.3s ease-in, 125 | border-color 0.3s ease-in; 126 | } 127 | 128 | /* 129 | * Border Color Fade 130 | * Blue: #66d8ed 131 | */ 132 | .ghost-button-border-color { 133 | display: inline-block; 134 | width: 200px; 135 | padding: 8px; 136 | color: #fff; 137 | border: 2px solid #fff; 138 | text-align: center; 139 | outline: none; 140 | text-decoration: none; 141 | -webkit-transition: border-color 0.3s ease-out, color 0.3s ease-out; 142 | transition: border-color 0.3s ease-out, 143 | color 0.3s ease-out; 144 | } 145 | .ghost-button-border-color:hover, 146 | .ghost-button-border-color:active { 147 | color: #66d8ed; 148 | border-color: #66d8ed; 149 | -webkit-transition: border-color 0.4s ease-in, color 0.4s ease-in; 150 | transition: border-color 0.4s ease-in, 151 | color 0.4s ease-in; 152 | } 153 | 154 | /* 155 | * Full Color Fade 156 | * Purple: #9363c4 157 | */ 158 | .ghost-button-full-color { 159 | display: inline-block; 160 | width: 200px; 161 | padding: 8px; 162 | color: #fff; 163 | background-color: transparent; 164 | border: 2px solid #fff; 165 | text-align: center; 166 | outline: none; 167 | text-decoration: none; 168 | -webkit-transition: color 0.3s ease-out, background-color 0.3s ease-out, border-color 0.3s ease-out; 169 | transition: color 0.3s ease-out, 170 | background-color 0.3s ease-out, 171 | border-color 0.3s ease-out; 172 | } 173 | .ghost-button-full-color:hover, 174 | .ghost-button-full-color:active { 175 | background-color: #9363c4; 176 | border-color: #9363c4; 177 | color: #fff; 178 | -webkit-transition:color 0.3s ease-in, background-color 0.3s ease-in, border-color 0.3s ease-in; 179 | transition: color 0.3s ease-in, 180 | background-color 0.3s ease-in, 181 | border-color 0.3s ease-in; 182 | } 183 | 184 | /* 185 | * Size Transition Effect 186 | */ 187 | .ghost-button-size-transition { 188 | display: inline-block; 189 | width: 200px; 190 | height: 25px; 191 | line-height: 25px; 192 | margin: 0 auto; 193 | padding: 8px; 194 | color: #fff; 195 | border: 2px solid #fff; 196 | text-align: center; 197 | outline: none; 198 | text-decoration: none; 199 | -webkit-transition: width 0.3s ease-out, height 0.3s ease-out, line-height 0.3s ease-out; 200 | transition: width 0.3s ease-out, 201 | height 0.3s ease-out, 202 | line-height 0.3s ease-out; 203 | } 204 | .ghost-button-size-transition:hover, 205 | .ghost-button-size-transition:active { 206 | width: 220px; 207 | height: 45px; 208 | line-height: 45px; 209 | -webkit-transition: width 0.1s ease-in, height 0.1s ease-in, line-height 0.1s ease-in; 210 | transition: width 0.1s ease-in, 211 | height 0.1s ease-in, 212 | line-height 0.1s ease-in; 213 | } 214 | 215 | /* Basic */ 216 | body { 217 | color: #fff; 218 | background: #000 url(img/bg.jpg) no-repeat center center; 219 | background-attachment: fixed; 220 | background-size: cover; 221 | font: 300 18px/22px "Raleway", sans-serif; 222 | } 223 | 224 | /* Typography */ 225 | h1, h2 { 226 | text-transform: uppercase; 227 | font-style: normal; 228 | font-weight: 300; 229 | } 230 | h1 { 231 | font-size: 54px; 232 | line-height: 65px; 233 | letter-spacing: 0.1em; 234 | } 235 | h2 { 236 | margin: 40px auto 10px auto; 237 | font-size: 27px; 238 | line-height: 33px; 239 | } 240 | 241 | /* Layout */ 242 | .container { 243 | width: 90%; 244 | max-width: 960px; 245 | margin: 50px auto 50px auto; 246 | text-align: center; 247 | } 248 | 249 | /* Media Queries */ 250 | @media (max-width: 420px) { 251 | h1 { 252 | font-size: 32px; 253 | line-height: 38px; 254 | } 255 | h2 { 256 | font-size: 22px; 257 | line-height: 27px; 258 | } 259 | p { 260 | font-size: 16px; 261 | line-height: 20px; 262 | } 263 | } --------------------------------------------------------------------------------