From our sponsor: From online stores to member areas, Squarespace is everything you need to sell anything.
Today we would like to give you some button inspiration. This button set consists of some simple, creative and subtle styles and effects to inspire you. The effects can be seen when hovering on some buttons and clicking on others. Mostly, CSS transitions are used but also CSS animations and for some buttons we use a bit of JavaScript to add/remove effect classes.
The icons, which we add using the :before (and sometimes :after) pseudo-class, are from IcoMoon and we’ve created them with the IcoMoon app.
The markup of a button is really simple. We just add specific shared classes:
<button class="btn btn-6 btn-6d">Button</button>
The common styles for all the buttons are some resets defined in .btn and we use the specific numbered classes for the different sets of styles. That numbered class are the shared styles for the sets. Each button has an additional specific class then. When using an icon, we add the icon-class which will use the pseudo element :before to add the character from the icon font.
An example for a specific button style is the following:
/* Button 6d */
.btn-6d {
border: 2px dashed #226fbe;
}
.btn-6d:hover {
background: transparent;
color: #226fbe;
}
Which will of course depend on what we define as a common style in .btn and .btn-6.
This class structure is used for demo purposes. Using a single style, the properties should of course be merged into a single class.
I hope you enjoy the styles and find them inspiring!
I cannot get the sliding backgrounds of 1a, 1b, 1c etc to work – I just don’t know what to do anymore – is anything other than the CSS required for those to work?
You need to add this to the parent element of the button:
position: relative; z-index: 1;Great code! Tks!
It is good I see you as my helper I just start developing webpages but how to links buttons to the to another page become difficult to me so please help me out.Thank you for that.
Simply, this do the trick for me.
<button class="btn btn-1 btn-1a" onclick="window.location.href='URL'">Button</button>I hate IE because it don’t support most of the things especially when you are web developer.And sadly most or the people still use IE.
This is Great….must try this
I’m amazed. Thank you for inspiring me with your demos! 🙂
nice wok,i like it
What a wonder full button.
Wow….great stuff!!! 🙂
Button 1c (awesome!!!) does work flawless in Chrome, but not in Safari. Any work-around available? Keep up the good work!
Amazing, thanks.
What is the font in the buttons? Thanks in advance 🙂
Wow, love the 3D ones at the end, gunna try and use them somwhere
Hey, I know this might sound really stupid but I’m wondering how do I install these buttons. I have a Squarespace website but I bough developer access so I could get the SFTP to put these buttons in there. I’m not sure where to put them but can someone help me?
Same question– I have a Squarespace website (no developer access), is there a code injection I can add in the main menu (similar to, say, what you can do for font awesome) that it can call to invoke these styles by putting the code in the code blocks?
Nice effects, thanks for sharing them. But for button style 1b, there’s a simpler method using box-shadow which you can find at http://bradsknutson.com/blog/css-button-with-sliding-background-color/.
Nice stuff, Thanks!
Nice stuff! But how can I change the height of a button???
How to on asp.net?
Amazing Effects!!! thanks!
All good Collection………..:) Amazing
Nice work! I’ve used one of your button. In my case I had to add z-index: 0; to the .bttn – without this there was no animation.
thanks for sharing