Nice CSS3 buttons for your site!

  • 2
  • Idea
  • Updated 7 years ago
Hey Yola-ers.

I have created a nice CSS3 button that I would like to share with you.

View it here: www.johnmccarthy.yolasite.com

Like it? If so keep reading.

Heres how to get it on your site.


<!--
<style type="text/css">
.button {
color: #fff;
text-align: center;
text-shadow: #0066CC 0 -1px 0;
text-decoration: none;
font-size: 20px;
width: 75%;
border: 1px solid #003399;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: rgba(0, 0, 0, .25) 0 1px 1px;
-moz-box-shadow: rgba(0, 0, 0, .25) 0 1px 1px;
-o-box-shadow: rgba(0, 0, 0, .25) 0 1px 1px;
box-shadow: rgba(0, 0, 0, .25) 0 1px 1px;
background: #006699;
background: -webkit-gradient(linear,left top,left bottom,from(#006699),
to(#003399));
background: -moz-linear-gradient(top,#006699, #003399);
background: -o-linear-gradient(top,#006699, #003399);
background: linear-gradient(top,#006699, #003399);
}
.button:hover,
.button:focus{
border-color:#0066CC;
-webkit-box-shadow: #00CCCC 0 0 5px;
-moz-box-shadow: #00CCCC 0 0 5px;
-o-box-shadow: #00CCCC 0 0 5px;
box-shadow: #00CCCC 0 0 5px;
}
.button:active{
background:#00CCCC;
background:-webkit-gradient(linear,left top,left bottom,from(#003399),to(#00CCCC));
background:-moz-linear-gradient(top, #003399, #00CCCC);
background:-o-linear-gradient(top, #003399, #00CCCC);
background:linear-gradient(top, #003399, #00CCCC);
}

a.click:link {
color: #fff;
text-decoration: none;
}
a.click:visited {
text-decoration: none;
color: #fff;
}
a.click:hover {
text-decoration: none;
color: #fff;
}
a.click:active {
text-decoration: none;
color: #fff;
}
</style>

-->



Paste the above code into a html widget on your site at the top of the page.
Remove the <!-- and -->

Then use the following code to show the button.


<!--

<div class="button">
<a class="click" href="YOURURLHERE">YOURBUTTONTEXTHERE</a>
</div>

-->


So, there you go, I plan to add more colors later and also share how to change the colors on your own.

!PLEASE NOTE!

This button is cross browser friendly and has a fall back for older browsers.
So what ever browser it is viewed in there will be a button to click on.

Enjoy.

John McCarthy.

Photo of John McCarthy

John McCarthy

  • 1292 Posts
  • 99 Reply Likes
  • happy

Posted 8 years ago

  • 2
Photo of Emmy

Emmy

  • 5892 Posts
  • 299 Reply Likes
Hi John,

Thanks so much for sharing!

Emmy
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
This is cool!

I also figured out how to get rid of the ugly yellow border on forms in Google Chrome! Just use this CSS:
<!--

<style type="text/css">
.textbox {
outline:0px;
}

.textbox:focus {
min-width:300px;
min-height: 20px;
background-color: #E8E8E8;
color:black;
border-radius: 3px;
font-size: 20px;
font-family: arial, sans-serif;
align: right;
padding:5px;
outline:0px solid #ccc;
box-shadow:0px 0px 7px black; /*CSS3 shadow: 7px blurred shadow all around form*/
-webkit-box-shadow:0px 0px 7px black; /*Safari shadow version*/
-moz-box-shadow:0px 0px 7px black; /*Mozilla shadow version*/
</style>

<form>
Field 1: <input class="textbox" type="text">
</form>

-->

You can see this here: http://my.nathansmusicstudio.cz.cc (Login with Login: Test and Password: Test and click on "Edit Profile" to see the forms with this CSS but make sure your in Google Chrome to see it)
Photo of John McCarthy

John McCarthy

  • 1292 Posts
  • 99 Reply Likes
-Attention-

The example has now moved to the following URL
http://jmtips.yolasite.com/button-1.php