Copy & Paste CSS buttons

CSS we can create beautifully detailed buttons in modern browsers. If you are viewing this in Internet Explorer 8 or older, please open a modern browser such as Internet Explorer 9+, Firefox, or Chrome. The buttons will still work in older browsers but will not have all the styling available to modern browsers.

Dead Simple Version

The following includes everything you need. No assembly required...

I'm a button

Just copy and paste the code below into an HTML block. (Change the highlighted parts.)

<span class="gold-btn">
<a href="http://www.eznetu.com">I'm a button</a>
</span>

<link href="http://www.eznetu.com/button-css/gold-btn.css" type="text/css" rel="stylesheet"/>

I'm a blue button

<span class="blue-pill">
<a href="http://www.eznetu.com">I'm a blue button</a>
</span>

<link href="http://www.eznetu.com/button-css/blue-pill.css" type="text/css" rel="stylesheet"/>

I'm a green button

<span class="green-silk">
<a href="http://www.eznetu.com">I'm a green button</a>
</span>

<link href="http://www.eznetu.com/button-css/green-silk.css" type="text/css" rel="stylesheet"/>

I'm a 3D orange button

<span class="orange-3d">
<a href="http://www.eznetu.com">I'm a 3D orange button</a>
</span>

<link href="http://www.eznetu.com/button-css/orange-3d-btn.css" type="text/css" rel="stylesheet"/>

I'm a 3D purple button

<span class="purple-3d">
<a href="http://www.eznetu.com">I'm a 3D purple button</a>
</span>

<link href="http://www.eznetu.com/button-css/purple-3d-btn.css" type="text/css" rel="stylesheet"/>

I'm a glossy black button

<span class="glossy-black-btn">
<a href="http://www.eznetu.com">I'm a glossy black button</a>
</span>

<link href="http://www.eznetu.com/button-css/glossy-black.css" type="text/css" rel="stylesheet"/>

More Advanced Version

(Requires You To Read)

How do I use this code?

There's not one way to use this code, but if you have no idea what to do, here's a simple way to start...

In EZ-PageBuilder add a Title block
Make it a link by adding a "#" in the URL
Under CSS Class type "button1"
Push Submit
Click File > Page Options
In the box labeled Head Code paste the code for the first button
Put an opening <style> tag at the beginning and a closing </style> tag at the end of the code. So your head code will look like this...

<style>
.button1 a{
  display:inline-block;
  font-weight:bold;
  font-size:1.55em;
  color: darkred;
  background: gold;
  padding: .7em;
  text-decoration:none;
  border-radius:3px;
  line-height:1;
  text-shadow: 1px 1px #fea;
  border:solid 2px #fe9;
  box-shadow: 0 2px 3px 1px rgba(0,0,0,.3), inset 0 -2px 2px 2px rgba(200,80,0,.2);
  transform-origin:bottom;
}
.button1 a:hover {
  background:#fd4;
  color:#c00;
  border-color:#fea;
}
.button1 a:active {
  transform:scale(.996);
  box-shadow: 0 2px 2px 0px rgba(0,0,0,.5), inset 0 -2px 2px 2px rgba(200,80,0,.2);
} 
</style>

8. Push Submit. If you did everything correctly, your link should now look like a gold button.

Troubleshooting

Double check your class name inside the title block. It should say "button1" not ".button1".
Make sure that the head code looks like the code above with an opening <style> and closing </style>.
If you choose to use one of the other buttons make sure your class name matches the code you put in your header. For example .button2{...} should match with CSS Class "button2".

Copy & Paste CSS buttons

Dead Simple Version

More Advanced Version

(Requires You To Read)

How do I use this code?

Troubleshooting

Popular Articles

Get A Custom Design

Getting Started

EZ-NetTools Websites

Featured Articles