Thursday, 19 December 2013
BUTTON CSS EXAMPLES


-------------------------------------------------------------------------------------------
USE THIS CODE
Read More:
https://icolorpalette.com/117-yellow-color-palettes
-------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
a.button {
text-decoration: none;
}
.button, .button span {
display: inline-block;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.button {
white-space: nowrap;
line-height:1em;
position:relative;
outline: none;
overflow: visible;
cursor: pointer;
border: 1px solid #999
border: rgba(0, 0, 0, .2) 1px solid
border-bottom:rgba(0, 0, 0, .4) 1px solid;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
background: -moz-linear-gradient(
center top,
rgba(255, 255, 255, .1) 0%,
rgba(0, 0, 0, .1) 100%
)
;/* FF3.6 */
background: -webkit-gradient(
linear,
center bottom,
center top,
from(rgba(0, 0, 0, .1)),
to(rgba(255, 255, 255, .1))
)
;/* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#19FFFFFF', EndColorStr='#19000000');
/* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#19FFFFFF', EndColorStr='#19000000')";
/* IE8 */
-moz-user-select: none;
-webkit-user-select:none;
-khtml-user-select: none;
user-select: none;
margin-bottom:10px;
}
.button.full, .button.full span {
display: block;
}
.button:active, .button.active {
top:1px;
}
.button span {
position: relative;
color:#fff;
text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);
border-top: rgba(255, 255, 255, .2) 1px solid;
padding:0.6em 1.3em;
line-height:1em;
text-decoration:none;
text-align:center;
white-space: nowrap;
}
.button.small span {
font-size:12px;
}
.button.medium span {
font-size:14px;
}
.button.large span {
font-size:18px;
}
.button.black {
background-color: #333333;
}
.button.gray {
background-color: #666666;
}
.button.white {
background-color: #FFFFFF;
}
.button.white span{
color: #666666;
}
.button.red {
background-color: #e62727;
}
.button.orange {
background-color: #ff5c00;
}
.button.magenta {
background-color: #A9014B;
}
.button.yellow {
background-color: #ffb515;
}
.button.blue {
background-color: #00ADEE;
}
.button.pink {
background-color: #e22092;
}
.button.green {
background-color: #91bd09;
}
.button.rosy {
background-color: #F16C7C;
}
.button.brown {
background-color: #804000;
}
.button.purple {
background-color: #800080;
}
.button.cyan {
background-color: #46C7C7;
}
.button.gold {
background-color: #D4A017;
}
</style>
<a class="button black" href=""><span>FbGadgets</span></a>
<a class="button small gray" href=""><span>FbGadgets</span></a>
<a class="button small orange" href=""><span>FbGadgets</span></a>
<a class="button small blue" href=""><span>FbGadgets</span></a>
<a class="button small purple" href=""><span>FbGadgets</span></a>
<a class="button small brown" href=""><span>FbGadgets</span></a>
<a class="button small cyan" href=""><span>FbGadgets</span></a>
<a class="button small gold" href=""><span>FbGadgets</span></a>
<a class="button small rosy" href=""><span>FbGadgets</span></a>
<a class="button small green" href=""><span>FbGadgets</span></a>
<a class="button small pink" href=""><span>FbGadgets</span></a>
</body>
</html>
--------------------------------------------------------------------------------------------
OR USE THIS CODE
-------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
body {
background-color:black;
margin-top:25px;
}
a.button {
text-decoration: none;
}
.button {
background-color:#777777;
background-position:50% 100%;
background-repeat:repeat no-repeat;
border:none;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
border-top-left-radius:5px;
border-top-right-radius:5px;
color:#FFFFFF;
cursor:pointer;
display:inline;
font-weight:bold;
padding:5px 10px;
text-shadow:#666666 1px 1px;}
.button:hover {
background-position: 0 center;
}
.button:active {
background-position: 0 top;
position: relative;
top: 1px;
padding: 6px 10px 4px;
}
.button.red { background-color: #e50000; }
.button.purple { background-color: #9400bf; }
.button.green { background-color: #58aa00; }
.button.orange { background-color: #ff9c00; }
.button.blue { background-color: #2c6da0; }
.button.black { background-color: #333; }
.button.white { background-color: #fff; color: #000; text-shadow: 1px 1px #fff; }
</style>
<a href='#' class='button'>Default</a>
<a href='#' class='button red'>Red</a>
<a href='#' class='button purple'>Purple</a>
<a href='#' class='button green'>Green</a>
<a href='#' class='button orange'>Orange</a>
<a href='#' class='button blue'>Blue</a>
<a href='#' class='button black'>Black</a>
<a href='#' class='button white'>White</a></body>
</html>
-------------------------------------------------------------------------------------------
OR USE THIS CODE
FOR MORE CSS COLORS GO TO BELOW LINK
http://www.w3schools.com/cssref/css_colornames.asp
--------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
body {
background-color:black;
margin-top:25px;
}
a.button {
text-decoration: none;
}
.button {
width:40px;
height:40px;
background: #3498db;
-webkit-border-radius: 30;
-moz-border-radius: 30;
border-radius: 0px;
font-family: Arial;
color: #ffffff;
font-size:14px;
font-weight:bold;
font-weight:bold;
padding:5px 10px;
text-shadow:#666666 1px 1px;
padding: 10px 20px 10px 20px;
text-decoration: none;
}
.button.B { background-color: #e50000; }
.button.C { background-color: #9400bf; }
.button.D { background-color: #58aa00; }
.button.E { background-color: #ff9c00; }
.button.F { background-color: #2c6da0; }
.button.G { background-color: #F0E68C; }
.button.H { background-color: #FF6347; }
.button.I { background-color: #FFD65E; }
.button.J { background-color: #333; }
.button.K { background-color: #A90329; }
.button.L { background-color: #4BA614; }
.button.M { background-color: #FF5DB1; }
.button.N { background-color: #00CED1;}
.button.O { background-color: #FFD700; }
.button.P { background-color: #A9DB80; }
.button.Q { background-color: #B29AF8; }
.button.R { background-color: #FFC579; }
.button.S { background-color: #B6E026; }
.button.T { background-color: #808000; }
.button.U { background-color: #0000ff; }
.button.V { background-color: #800000; }
.button.W { background-color: burlywood; }
.button.X { background-color: #c0c0c0; }
.button.Y { background-color: rosybrown; }
.button.Z { background-color: deeppink; }
</style>
<a href='#' class='button'>A</a>
<a href='#' class='button B'>B</a>
<a href='#' class='button C'>C</a>
<a href='#' class='button D'>D</a>
<a href='#' class='button E'>E</a>
<a href='#' class='button F'>F</a>
<a href='#' class='button G'>G</a>
<a href='#' class='button H'>H</a>
<a href='#' class='button I'>I</a>
<a href='#' class='button J'>J</a>
<a href='#' class='button K'>K</a>
<a href='#' class='button L'>L</a>
<a href='#' class='button M'>M</a>
<a href='#' class='button N'>N</a>
<a href='#' class='button O'>O</a>
<a href='#' class='button P'>P</a>
<a href='#' class='button Q'>Q</a>
<a href='#' class='button R'>R</a>
<br /><br />
<a href='#' class='button S'>S</a>
<a href='#' class='button T'>T</a>
<a href='#' class='button U'>U</a>
<a href='#' class='button V'>V</a>
<a href='#' class='button W'>W</a>
<a href='#' class='button X'>X</a>
<a href='#' class='button Y'>Y</a>
<a href='#' class='button Z'>Z</a>
</body>
</html>
---------------------------------------------------------------------------------------------------
OR USE THIS CODE
---------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
body {
background-color:black;
margin-top:25px;
}
a.button {
text-decoration: none;
}
.button {
background-color:#44c767;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:arial;
font-size:18px;
padding:5px 31px;
text-decoration:none;
text-shadow:0px 1px 0px #2f6627;
}
.button.B { background-color: #e50000; }
.button.C { background-color: #9400bf; }
.button.D { background-color: #58aa00; }
.button.E { background-color: #ff9c00; }
.button.F { background-color: #2c6da0; }
.button.G { background-color: #F0E68C; }
.button.H { background-color: #FF6347; }
.button.I { background-color: #FFD65E; }
.button.J { background-color: #333; }
.button.K { background-color: #A90329; }
.button.L { background-color: #4BA614; }
.button.M { background-color: #FF5DB1; }
.button.N { background-color: #00CED1;}
.button.O { background-color: #FFD700; }
.button.P { background-color: #A9DB80; }
.button.Q { background-color: #B29AF8; }
.button.R { background-color: #FFC579; }
.button.S { background-color: #B6E026; }
.button.T { background-color: #808000; }
.button.U { background-color: #0000ff; }
.button.V { background-color: #800000; }
.button.W { background-color: burlywood; }
.button.X { background-color: #c0c0c0; }
.button.Y { background-color: rosybrown; }
.button.Z { background-color: deeppink; }
</style>
<a href='#' class='button'>A</a>
<a href='#' class='button B'>B</a>
<a href='#' class='button C'>C</a>
<a href='#' class='button D'>D</a>
<a href='#' class='button E'>E</a>
<a href='#' class='button F'>F</a>
<a href='#' class='button G'>G</a>
<a href='#' class='button H'>H</a>
<a href='#' class='button I'>I</a>
<a href='#' class='button J'>J</a>
<a href='#' class='button K'>K</a>
<a href='#' class='button L'>L</a>
<br /><br />
<a href='#' class='button M'>M</a>
<a href='#' class='button N'>N</a>
<a href='#' class='button O'>O</a>
<a href='#' class='button P'>P</a>
<a href='#' class='button Q'>Q</a>
<a href='#' class='button R'>R</a>
<a href='#' class='button S'>S</a>
<a href='#' class='button T'>T</a>
<a href='#' class='button U'>U</a>
<a href='#' class='button V'>V</a>
<a href='#' class='button W'>W</a>
<a href='#' class='button X'>X</a>
<br /><br />
<a href='#' class='button Y'>Y</a>
<a href='#' class='button Z'>Z</a>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------
CODE:
http://www.sciencekids.co.nz/
--------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------
COPY AND PASTE BELOW CODE
http://fbgadgets.blogspot.co.uk/2015/10/brick-wall-menu-bar.html
http://fbgadgets.blogspot.co.uk/2013/11/breadcrumb-navigation-menu-guardian.html
https://www.youtube.com/watch?v=O-ly2ArnN30&feature=youtu.be
-----------------------------------------------------------------------------------------------------------------------
LINK CHANGE INTO BUTTON
http://fbgadgets.blogspot.com/2014/01/link-change-into-button.html
-----------------------------------------------------------------------------------------------------------------------
OR USE THIS CODE WITH BUTTON ID AND LINK A ON BUTTON DIV CODE
-----------------------------------------------------------------------------------------------------------------------
OR USE ABOVE CODE CHANGE TEXT CODE WITH IMAGE
-----------------------------------------------------------------------------------------------------------------------
LINK CHNAGE INTO BUTTON WITH INNER HTML
------------------------------------------------------------------------------------------------------------
SINGLE BUTTON
-------------------------------------------------------------------------------------------------------------
RANDOM COLOR -------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
a.button {
text-decoration: none;
}
.button, .button span {
display: inline-block;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.button {
white-space: nowrap;
line-height:1em;
position:relative;
outline: none;
overflow: visible;
cursor: pointer;
border: 1px solid #999
border: rgba(0, 0, 0, .2) 1px solid
border-bottom:rgba(0, 0, 0, .4) 1px solid;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
background: -moz-linear-gradient(
center top,
rgba(255, 255, 255, .1) 0%,
rgba(0, 0, 0, .1) 100%
)
;/* FF3.6 */
background: -webkit-gradient(
linear,
center bottom,
center top,
from(rgba(0, 0, 0, .1)),
to(rgba(255, 255, 255, .1))
)
;/* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#19FFFFFF', EndColorStr='#19000000');
/* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#19FFFFFF', EndColorStr='#19000000')";
/* IE8 */
-moz-user-select: none;
-webkit-user-select:none;
-khtml-user-select: none;
user-select: none;
margin-bottom:10px;
}
.button.full, .button.full span {
display: block;
}
.button:active, .button.active {
top:1px;
}
.button span {
position: relative;
color:#fff;
text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);
border-top: rgba(255, 255, 255, .2) 1px solid;
padding:0.6em 1.3em;
line-height:1em;
text-decoration:none;
text-align:center;
white-space: nowrap;
}
.button.small span {
font-size:12px;
}
.button.medium span {
font-size:14px;
}
.button.large span {
font-size:18px;
}
.button.black {
background-color: #333333;
}
.button.gray {
background-color: #666666;
}
.button.white {
background-color: #FFFFFF;
}
.button.white span{
color: #666666;
}
.button.red {
background-color: #e62727;
}
.button.orange {
background-color: #ff5c00;
}
.button.magenta {
background-color: #A9014B;
}
.button.yellow {
background-color: #ffb515;
}
.button.blue {
background-color: #00ADEE;
}
.button.pink {
background-color: #e22092;
}
.button.green {
background-color: #91bd09;
}
.button.rosy {
background-color: #F16C7C;
}
.button.brown {
background-color: #804000;
}
.button.purple {
background-color: #800080;
}
.button.cyan {
background-color: #46C7C7;
}
.button.gold {
background-color: #D4A017;
}
</style>
<a class="button black" href=""><span>FbGadgets</span></a>
<a class="button small gray" href=""><span>FbGadgets</span></a>
<a class="button small orange" href=""><span>FbGadgets</span></a>
<a class="button small blue" href=""><span>FbGadgets</span></a>
<a class="button small purple" href=""><span>FbGadgets</span></a>
<a class="button small brown" href=""><span>FbGadgets</span></a>
<a class="button small cyan" href=""><span>FbGadgets</span></a>
<a class="button small gold" href=""><span>FbGadgets</span></a>
<a class="button small rosy" href=""><span>FbGadgets</span></a>
<a class="button small green" href=""><span>FbGadgets</span></a>
<a class="button small pink" href=""><span>FbGadgets</span></a>
</body>
</html>
--------------------------------------------------------------------------------------------
OR USE THIS CODE
-------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
body {
background-color:black;
margin-top:25px;
}
a.button {
text-decoration: none;
}
.button {
background-color:#777777;
background-position:50% 100%;
background-repeat:repeat no-repeat;
border:none;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
border-top-left-radius:5px;
border-top-right-radius:5px;
color:#FFFFFF;
cursor:pointer;
display:inline;
font-weight:bold;
padding:5px 10px;
text-shadow:#666666 1px 1px;}
.button:hover {
background-position: 0 center;
}
.button:active {
background-position: 0 top;
position: relative;
top: 1px;
padding: 6px 10px 4px;
}
.button.red { background-color: #e50000; }
.button.purple { background-color: #9400bf; }
.button.green { background-color: #58aa00; }
.button.orange { background-color: #ff9c00; }
.button.blue { background-color: #2c6da0; }
.button.black { background-color: #333; }
.button.white { background-color: #fff; color: #000; text-shadow: 1px 1px #fff; }
</style>
<a href='#' class='button'>Default</a>
<a href='#' class='button red'>Red</a>
<a href='#' class='button purple'>Purple</a>
<a href='#' class='button green'>Green</a>
<a href='#' class='button orange'>Orange</a>
<a href='#' class='button blue'>Blue</a>
<a href='#' class='button black'>Black</a>
<a href='#' class='button white'>White</a></body>
</html>
-------------------------------------------------------------------------------------------
OR USE THIS CODE
FOR MORE CSS COLORS GO TO BELOW LINK
http://www.w3schools.com/cssref/css_colornames.asp
--------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
body {
background-color:black;
margin-top:25px;
}
a.button {
text-decoration: none;
}
.button {
width:40px;
height:40px;
background: #3498db;
-webkit-border-radius: 30;
-moz-border-radius: 30;
border-radius: 0px;
font-family: Arial;
color: #ffffff;
font-size:14px;
font-weight:bold;
font-weight:bold;
padding:5px 10px;
text-shadow:#666666 1px 1px;
padding: 10px 20px 10px 20px;
text-decoration: none;
}
.button.B { background-color: #e50000; }
.button.C { background-color: #9400bf; }
.button.D { background-color: #58aa00; }
.button.E { background-color: #ff9c00; }
.button.F { background-color: #2c6da0; }
.button.G { background-color: #F0E68C; }
.button.H { background-color: #FF6347; }
.button.I { background-color: #FFD65E; }
.button.J { background-color: #333; }
.button.K { background-color: #A90329; }
.button.L { background-color: #4BA614; }
.button.M { background-color: #FF5DB1; }
.button.N { background-color: #00CED1;}
.button.O { background-color: #FFD700; }
.button.P { background-color: #A9DB80; }
.button.Q { background-color: #B29AF8; }
.button.R { background-color: #FFC579; }
.button.S { background-color: #B6E026; }
.button.T { background-color: #808000; }
.button.U { background-color: #0000ff; }
.button.V { background-color: #800000; }
.button.W { background-color: burlywood; }
.button.X { background-color: #c0c0c0; }
.button.Y { background-color: rosybrown; }
.button.Z { background-color: deeppink; }
</style>
<a href='#' class='button'>A</a>
<a href='#' class='button B'>B</a>
<a href='#' class='button C'>C</a>
<a href='#' class='button D'>D</a>
<a href='#' class='button E'>E</a>
<a href='#' class='button F'>F</a>
<a href='#' class='button G'>G</a>
<a href='#' class='button H'>H</a>
<a href='#' class='button I'>I</a>
<a href='#' class='button J'>J</a>
<a href='#' class='button K'>K</a>
<a href='#' class='button L'>L</a>
<a href='#' class='button M'>M</a>
<a href='#' class='button N'>N</a>
<a href='#' class='button O'>O</a>
<a href='#' class='button P'>P</a>
<a href='#' class='button Q'>Q</a>
<a href='#' class='button R'>R</a>
<br /><br />
<a href='#' class='button S'>S</a>
<a href='#' class='button T'>T</a>
<a href='#' class='button U'>U</a>
<a href='#' class='button V'>V</a>
<a href='#' class='button W'>W</a>
<a href='#' class='button X'>X</a>
<a href='#' class='button Y'>Y</a>
<a href='#' class='button Z'>Z</a>
</body>
</html>
---------------------------------------------------------------------------------------------------
OR USE THIS CODE
---------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
body {
background-color:black;
margin-top:25px;
}
a.button {
text-decoration: none;
}
.button {
background-color:#44c767;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:arial;
font-size:18px;
padding:5px 31px;
text-decoration:none;
text-shadow:0px 1px 0px #2f6627;
}
.button.B { background-color: #e50000; }
.button.C { background-color: #9400bf; }
.button.D { background-color: #58aa00; }
.button.E { background-color: #ff9c00; }
.button.F { background-color: #2c6da0; }
.button.G { background-color: #F0E68C; }
.button.H { background-color: #FF6347; }
.button.I { background-color: #FFD65E; }
.button.J { background-color: #333; }
.button.K { background-color: #A90329; }
.button.L { background-color: #4BA614; }
.button.M { background-color: #FF5DB1; }
.button.N { background-color: #00CED1;}
.button.O { background-color: #FFD700; }
.button.P { background-color: #A9DB80; }
.button.Q { background-color: #B29AF8; }
.button.R { background-color: #FFC579; }
.button.S { background-color: #B6E026; }
.button.T { background-color: #808000; }
.button.U { background-color: #0000ff; }
.button.V { background-color: #800000; }
.button.W { background-color: burlywood; }
.button.X { background-color: #c0c0c0; }
.button.Y { background-color: rosybrown; }
.button.Z { background-color: deeppink; }
</style>
<a href='#' class='button'>A</a>
<a href='#' class='button B'>B</a>
<a href='#' class='button C'>C</a>
<a href='#' class='button D'>D</a>
<a href='#' class='button E'>E</a>
<a href='#' class='button F'>F</a>
<a href='#' class='button G'>G</a>
<a href='#' class='button H'>H</a>
<a href='#' class='button I'>I</a>
<a href='#' class='button J'>J</a>
<a href='#' class='button K'>K</a>
<a href='#' class='button L'>L</a>
<br /><br />
<a href='#' class='button M'>M</a>
<a href='#' class='button N'>N</a>
<a href='#' class='button O'>O</a>
<a href='#' class='button P'>P</a>
<a href='#' class='button Q'>Q</a>
<a href='#' class='button R'>R</a>
<a href='#' class='button S'>S</a>
<a href='#' class='button T'>T</a>
<a href='#' class='button U'>U</a>
<a href='#' class='button V'>V</a>
<a href='#' class='button W'>W</a>
<a href='#' class='button X'>X</a>
<br /><br />
<a href='#' class='button Y'>Y</a>
<a href='#' class='button Z'>Z</a>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------
CODE:
http://www.sciencekids.co.nz/
--------------------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
<!--
a {
text-decoration:none }
-->
</style>
</head>
<body>
<div align="left" class="style5">
<a href="http://www.sciencekids.co.nz/" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','images/template
images/homebutton2.jpg',1)">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOO6YVq1lgFT8ha47bhAd8RvQzToshIFSplNvts0mndvlKfBw0libzjxSB-wSK5om11GGtCHLGVF8P0YjY71e8J5sylcan85ggvXCNtpXmFnxnEUZT0d4GsI_QUBRcPDxLPMxua3UzCgja/s1600/homebutton.jpg" alt="Science kids
home" name="Home" width="96" height="30" border="0" id="Home"></a><a href="http://www.sciencekids.co.nz/experiments.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Experiments','','images/template
images/experimentsbutton2.jpg',1)">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitIiDQYpC6c5oYT2U2o9Q9nY8AEUpeeeLFYQgxd9DyNJvxmrjX17yOujRlgFTs8IJE3XhNEO99RCVZKxyVhmsNlShib2QpfjzghHsYvBFuR8SOy2ZzYQDV8qHTs9zqh3Bp99Lwye3lT4mC/s1600/experimentsbutton.jpg" alt="Fun science
experiments" name="Experiments" width="108" height="30" border="0" id="Experiments"></a><a href="http://www.sciencekids.co.nz/gamesactivities.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Games','','images/template
images/gamesbutton2.jpg',1)">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDr50pEbijS8XCYX_vXEQv1KvPVxloM3zdNlBnFAebimSC63mnxK22Vxz5dTIQZZYxkNPQptTjM2nRnTf6dA-bCT_hjJRCYQ1YUBhjOEHvovh-85dTspWwz8r7haYQOtd4pDWiYzd_sIep/s1600/gamesbutton.jpg" alt="Cool science
games & activities" name="Games" width="100" height="30" border="0" id="Games"></a><a href="http://www.sciencekids.co.nz/sciencefacts.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Facts','','images/template
images/factsbutton2.jpg',1)">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmjSmbgqGZHckeRRDzxU210x_Kx3NTmcTRv4Q69v7PJn_OB5tJIcKBv9Ieg3MJToiX-Yc3o4s-l7ned-VqX-5EuzXViUt5FlgPSS67gTxf6gh-lcgjlVFbjUUt8BBJsrffx-I8wIEiXZQQ/s1600/factsbutton.jpg" alt="Amazing
science facts" name="Facts" width="96" height="30" border="0" id="Facts"></a><a href="http://www.sciencekids.co.nz/quizzes.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Quizzes','','images/template
images/quizzesbutton2.jpg',1)">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpCvMfDT5mCxLb7WbOK33OntDzddrDjG8xHUhqhlGVz1EQPtnZsYNq-A21uf__KCu3k411kK7hlSzb0LgFhsYya7l4HPCGG3FqzpyvcVaqwG7uzIVg6xtdXIVb_la_RTVWOTvSjI9AxITQ/s1600/quizzesbutton.jpg" alt="Science
quizzes" name="Quizzes" width="96" height="30" border="0" id="Quizzes"></a><a href="http://www.sciencekids.co.nz/projects.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Projects','','images/template
images/projectsbutton2.jpg',1)">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcPgtTxftAaXDXm8CfcDHO2Bh3fJJVc5dJZ9kzADAS2bqZkqOdjqPGHvpxWas6jXwse0g0_h7v9dvi33soCvedxcwmjiu-uAOdw3MlwzlBvH1KaZOBF41MATZxLJF6DBaLznZ4HQLdwQ7k/s1600/projectsbutton.jpg" alt="Science fair
projects" name="Projects" width="98" height="30" border="0" id="Projects"></a><a href="http://www.sciencekids.co.nz/lessonplans.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Lessons','','images/template
images/lessonsbutton2.jpg',1)">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha7S5XLuwxCzHEjOUmATy4Ekrc4uHulXPm7M04HPba69x17BWmxHhqlUGxkKLCQo7kATBRNssZI3Q6Ftve71uLK4S8sTYjtf98Jw2QCmB5XTRrUDLfGuLdn3XxH-H_1t0QJDB3A28pZfFv/s1600/lessonsbutton.jpg" alt="Science
lesson plans and class ideas" name="Lessons" width="96" height="30" border="0" id="Lessons"></a><a href="http://www.sciencekids.co.nz/images.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Images','','images/template
images/imagesbutton2.jpg',1)">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4EIzfixLlQBcUA0ecjyl2ztD_NMRYiCuokq_mBSyScFTPekX_UBtyUyD2eFI1qpbVPmVru_TzfnZwwgiKR3KkghoMFfb0QlP4AlUCmnqzs61GbRbK-PIciG7CMxsI4BUtQsGES4f_cBzf/s1600/imagesbutton.jpg" alt="Science
images, photos & pictures" name="Images" width="96" height="30" border="0" id="Images"></a><a href="http://www.sciencekids.co.nz/videos.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Videos','','images/template
images/videosbutton2.jpg',1)">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzHyiJxuY7c3PcsHhgRh-sHNWFoEzgyydzBxFt0j9gocUxkMnfcENOXL6mfHvHQQer17lTrey94kol_I95QW0r3fxFDwxPZ39Yhie-QCAktwJ_yd7GaOV_oamGYHes82feefQnlxkt7KqL/s1600/videosbutton.jpg" alt="Science
videos" name="Videos" width="96" height="30" border="0" id="Videos"></a><a href="http://www.sciencekids.co.nz/topics.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Science
subjects','','images/template
images/subjectsbutton2.jpg',1)">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigsz-HVgbUmYb3Pxn1_wUmSwz96oGi51U1hmCSEPAXAss6tvEKN-juSdE9D0HrWHL_qSlqDzBZU9V2jpSeSaefyJK-bH88MDWtHc2ZRCo637ER9w0Y6hi9z4qN7MQf1dwmQ9QMWPMLNKKF/s1600/subjectsbutton.jpg" alt="Science
topics" name="Science subjects" width="98" height="30" border="0" id="Science subjects"></a>
</div>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------
COPY AND PASTE BELOW CODE
http://fbgadgets.blogspot.co.uk/2015/10/brick-wall-menu-bar.html
http://fbgadgets.blogspot.co.uk/2013/11/breadcrumb-navigation-menu-guardian.html
https://www.youtube.com/watch?v=O-ly2ArnN30&feature=youtu.be
-----------------------------------------------------------------------------------------------------------------------
LINK CHANGE INTO BUTTON
http://fbgadgets.blogspot.com/2014/01/link-change-into-button.html
-----------------------------------------------------------------------------------------------------------------------
<style>
a{
color:Black;
background-color:White;
text-decoration:none; /*REMOVE UNDER LINE FROM TEXT */
/*GIVE BORDER AROUND TEXT USE BORDER STYLE AND COLOR */
border-style:solid;
border-color:Black;
/*KEEP TEXT IN CENTER IN BOX USE PADDING DISPLAY */
padding:16px 32px;
display:inline-block;
}
</style>
<a href="default.asp" target="_blank">CLICK ME</a>
-----------------------------------------------------------------------------------------------------------------------OR USE THIS CODE WITH BUTTON ID AND LINK A ON BUTTON DIV CODE
-----------------------------------------------------------------------------------------------------------------------
<style>
#CssIdForButtonStyle{
color:Black;
background-color:White;
text-decoration:none; /*REMOVE UNDER LINE FROM TEXT */
/*GIVE BORDER AROUND TEXT USE BORDER STYLE AND COLOR */
border-style:solid;
border-color:Black;
/*KEEP TEXT IN CENTER IN BOX USE PADDING DISPLAY */
padding:16px 32px;
display:inline-block;
}
</style>
<a href="https://www.w3schools.com/css/css_link.asp">
<div id="CssIdForButtonStyle">CLICK ME</div>
</a>
-----------------------------------------------------------------------------------------------------------------------</a>
OR USE ABOVE CODE CHANGE TEXT CODE WITH IMAGE
-----------------------------------------------------------------------------------------------------------------------
<style>
#CssIdForAStyle{
color:Black;
background-color:White;
text-decoration:none; /*REMOVE UNDER LINE FROM TEXT */
/*GIVE BORDER AROUND TEXT USE BORDER STYLE AND COLOR */
border-style:solid;
border-color:Black;
/*KEEP TEXT IN CENTER IN BOX USE PADDING DISPLAY */
padding:16px 32px;
display:inline-block;
}
</style>
<a id="CssIdForAStyle" href="https://www.w3schools.com/css/css_link.asp">
<img src="https://www.w3schools.com/tags/smiley.gif" alt="Smiley face" height="42" width="42">
</a>
-------------------------------------------------------------------------------------------------------------LINK CHNAGE INTO BUTTON WITH INNER HTML
------------------------------------------------------------------------------------------------------------
<button href="http://fbgadgets.blogspot.com/2013/12/button-css-examples.html"style="border: solid; padding: 10px;display:inline-block;cursor: pointer;"> LINK 1</button>
<button href="http://fbgadgets.blogspot.com/2014/01/link-change-into-button.html"style="border:solid;padding:10px;display:inline-block;cursor:pointer;"> LINK 2</button>
<button href="https://www.youtube.com/watch?v=150RVuS_kAM"style="border:solid;padding:10px;display:inline-block;cursor:pointer;">LINK CHANGE INTO BUTTON IN HTML - YouTube</button>
------------------------------------------------------------------------------------------------------------SINGLE BUTTON
-------------------------------------------------------------------------------------------------------------
<a href="https://www.youtube.com/watch?v=150RVuS_kAM"
style="
align-items: flex-start;
text-align: center;
cursor: default;
color: buttontext;
background-color: buttonface;
box-sizing: border-box;
padding: 2px 6px 3px;
border-width: 2px;
border-style: outset;
border-color: buttonface;
border-image: initial;
display:inline-block;cursor:pointer;
text-decoration:none;
"
>LINK CHANGE INTO BUTTON IN HTML - YouTube</a>
-------------------------------------------------------------------------------------------------------------style="
align-items: flex-start;
text-align: center;
cursor: default;
color: buttontext;
background-color: buttonface;
box-sizing: border-box;
padding: 2px 6px 3px;
border-width: 2px;
border-style: outset;
border-color: buttonface;
border-image: initial;
display:inline-block;cursor:pointer;
text-decoration:none;
"
>LINK CHANGE INTO BUTTON IN HTML - YouTube</a>
RANDOM COLOR -------------------------------------------------------------------------------------------------------------
<html> <!-- https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_image_test --> <head> <style> .divs{ float:left; width:30%; height: 150px; margin:5px; } </style> </head> <body onload="changeBackground();"> <div> <div id="d1" class="divs"></div> <div id="d2" class="divs"></div> <div id="d3" class="divs"></div> </div> <div> <div id="d4" class="divs"></div> <div id="d5" class="divs"></div> <div id="d6" class="divs"></div> </div> <div> <div id="d7" class="divs"></div> <div id="d8" class="divs"></div> <div id="d9" class="divs"></div> </div> <script> function changeBackground() { var i=1; for(i=1;i<=9;i++){ document.getElementById("d"+i).style.backgroundColor = '#'+Math.floor(Math.random()*16777215).toString(16); } } </script> </body> </html>`-------------------------------------------------------------------------------------------------------------
Related movie you might like to see :

CSS SYNTAX HIGHLIGHT CHANGE IN NOT...

WEB IMAGE DOWNLOADER

TEXT COMPARE OR DUPLI TEXT FINDER

BLOCK JAVA SCRIPT BY GOOGLE CHROME

MOUSE COORDINATES IN JAVA SCRIPT

RELATED POST WIDGET LIST WITHOUT TH...

DYNAMIC VIEWS BLOGGER TEMPLATE

FLASH PLAYER SWF FILE DOWNLOAD ARCH...

WHACK A RAT CSS GAME

GOOGLE FILTER BUTTON IN IMAGE SEARC...

BUTTON PADDING CHANGE HEIGHT WIDTH

INPUT BUTTON VALUE SWAP
?
+
X
Recommended for you
Loading..
Related Post for BUTTON CSS EXAMPLES
RECAPTCHA KEY CONTCAT FORM FOR BLOGGER ------------------------------------------------------------------------------------------------------------ COPY AND PASTE BELOW CODE READMORE: http://kontactr.com/ httpsā¦
PADDING BUTTON ------------------------------------------------------------------------------------------------------------ READ MORE: http://www.w3schools.com/css/css_padding.asp ----------ā¦
RELATED POST WIDGET FRONT SCREEN TEMPLATE ---------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE ------------------------ā¦
EDIT IMAGE IN NOTEPAD++ ---------------------------------------------------------------------------------------------------------------------- https://www.google.co.uk/search?q=edit+picture+in+noā¦
SYNTAX HIGHLIGHTER ON LINE FOR BLOGGER ---------------------------------------------------------------------------------------------------------- READ MORE: http://fbgadgets.blogspot.co.uā¦
White Space Remover /************************************BODY************************************/ body { background-color: #eee; font-family: Arial, Helvetica Neue, Helvetica, sans-serif; foā¦
HOW TO GET MALWARE ADD POPUP WITHOUT SOFTWARE --------------------------------------------------------------------------------------------------------- STEP 1: GO TO WINDOW TASK MANAGER STEP 2: OPEN FILE LOCATION AND DEā¦
RECOMMENDED POST SLIDE OUT FOR BLOGGER TEMPLATE -------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE ------------------------------------------ā¦
Platinum Arts Sandbox Free 3D Game Maker ----------------------------------------------------------------------------------------------------- READ MORE: ------------------------------------------------------ā¦
AUTOMATION ANY WEBSITES ------------------------------------------------------------------------------------------------------ READ MORE: https://www.automationanywhere.com/webdataext?r=google&w=ā¦
NEWS TICKER BLOGGER TEMPLATES ---------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODEIN BLOGGER TEMPLATE -----------------ā¦
Recommended Post Slide out for Blogger ---------------------------------------------------------------------------------------------------- RECOMMENDED POST SLIDE OUT FOR BLOG - YouTube ā¶ 2:50 https:/ā¦
RELATED POST WIDGET LEFT TO RIGHT #related-posts h2{ background:#111111; border-top-color:#63C4F1; border-top-style:solid; border-top-width:3px; color:#FFFFFF; font-family:Oswald; font-size:16px; font-stretch:ā¦
SYNTAX HIGHLIGHTER BLOGGER TEMPLATE --------------------------------------------------------------------------------------------------------- READ MORE: http://fbgadgets.blogspot.co.uk/2014/08/syntax-highlightā¦
IMAGE CONVERTER SOFTWARE body { background: #F7F6F6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnJLkVEJ3qEWo7QLxoIodbY4zPdTiYoP9fGbBTrurq74uG7Zcay6tGp74LmQ3o20PswnHIQysiDkM3ANkr7jC1ā¦
HTML SYNTAX HIGHLIGHTER ----------------------------------------------------------------------------------------------------------------- CODE: -------------------------------------------------------ā¦
POPULAR POST WIDGET DIFFERENT STYLES ------------------------------------------------------------------------------------------------------ STYLE 1: ---------------------------------------------------------------ā¦
CODE OR TEXT WRITING BOX -------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE IN HTML --------------------------------ā¦
PAGINATION IN BLOG ---------------------------------------------------------------------------------------------------------- 1- FIND BODY CLOSE TAG AND REPLACE WITH BELOW CODE READ MORE: http:/ā¦
WHITE SPACE REMOVER CODE --------------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE IN POST HTML SECTION COPY CODE ā¦
BLOG FULL POST IMAGE 600 BY 600 <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <htmā¦
CSS BORDER COLOR -------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE -------------------------------------------ā¦
WORD PRESS PARTS -------------------------------------------------------------------------------------------------------- Read More: ----------------------------------ā¦
SYNTAX HIGHLIGHTER BLOGGER TEMPLATE ========================================================================= COPY AND PASTE BELOW CODE IN BLOGGER TEMPLATE http://fbgadgets.blogspot.co.uk/2014/08/syntax-hā¦
SYNTAX HIGHLIGHTER BLOGGER TEMPLATE ----------------------------------------------------------------------------------------------------------- READ MORE: http://fbgadgets.blogspot.co.uk/2014/08/syntax-highlā¦
GOOGLE PROJECT HOSTING ------------------------------------------------------------------------------------------------------------- STEP:1 LOGIN YOUR GOOGLE ACCOUNT STEP:2 GO TO SITE https://code.ā¦
ADD POP UP REMOVER STEP 2: Remove FocusBase pop-up ads from Internet Explorer, Firefox and Google Chrome with AdwCleaner The AdwCleaner utility will scan your computer and web browser for ā¦
Popular Posts Widget for Blogger Tweak ---------------------------------------------------------------------------------------------------------- 1- ADD POPULAR POST WIDGET IN BLOG 2- ADD HTML/JAVA WIDGET IN BLOG Aā¦
GOOGLE IMAGE HOSTING BY PICSA -------------------------------------------------------------------------------------------------------- READ MORE: -----------------------------------------------ā¦
BLOG FILE HOSTING GOOGLE PROJECT WITH TORTOISE SVN SOFTWARE EDIT HTML PAGE IN GOOGLE - YouTube ā¶ 4:19 https://www.youtube.com/watch?v=Q4yfMqPFSYE 16 mins ago - Uploaded by SAVE MONEY http://fbgadgets.blogspot.co.uk/2016/09/ā¦
SEARCH BOX WITHOUT JAVA CODE ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE <input id='input' name='q' placeholdeā¦
INSTALL WORD PRESS TEMPLATE Plugins are tools which provide additional functionality to your application. To install a plugin you generally just need to put the plugin file into your 'wp-content/plugins' diā¦
PAGE NAVIGATION WITH TITLE AND THUMBNAIL IN BLOG ------------------------------------------------------------------------------------------------------------ COPY AND PASTE BELOW CODE RED JAVA CODE AND JAVA FILE LINK PAGā¦
RELATED POST WIDGET LIST SHAPE ---------------------------------------------------------------------------------------------------------------- READ MORE: http://fbgadgets.blogspot.co.uk/2013/12/n-relate-posā¦
C DRIVE OPEN IN GOOGLE AND DATA URI IMAGE C DRIVE OPEN IN CHROME - YouTube ā¶ 2:14 https://www.youtube.com/watch?v=aXpogZBq6fk 4 mins ago - Uploaded by SAVE MONEY C DRIVE OPEN IN CHROME. SAVE MONEY ... Chroā¦
Labels:
B
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment
Click to see the code!
To insert emoticon you must added at least one space before the code.