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 :

WHACK A RAT CSS GAME

GOOGLE FILTER BUTTON IN IMAGE SEARC...

BUTTON PADDING CHANGE HEIGHT WIDTH

INPUT BUTTON VALUE SWAP

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...
?
+
X
Recommended for you
Loading..
Related Post for BUTTON CSS EXAMPLES
BLOG ZOOM EFFECT THUMBNAIL ------------------------------------------------------------------------------------------------------------ COPY AND PASTE BELOW CODE READ MORE: http://www.mastemplate.com/20ā¦
BRICK WALL MENU BAR CODE -------------------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE http://fbgadgets.blogspoā¦
DYNAMIC VIEWS BLOGGER TEMPLATE -------------------------------------------------------------------------------------------------------------- CODE: -----------------------------------------------------------ā¦
FLICKITY JS CSS SLIDER ----------------------------------------------------------------------------------------------------------------------- ReadMore: https://flickity.metafizzy.co/ NEED 1 CSS FILā¦
MOUSE COORDINATES IN JAVA SCRIPT -------------------------------------------------------------------------------------------------------------- mouse coordinates finder on website https://chrome.google.com/webā¦
FIREBUG LITE USE OFFLINE ------------------------------------------------------------------------------------------------------------- 1)GET CSS CODE BY COPY CSS SELECTOR OR GOOGLE INSPECT 2) OR GET CSSā¦
TEXT COMPARE OR DUPLI TEXT FINDER ------------------------------------------------------------------------------------------------------------------ READ MORE: FIND RED TEXT IN GOOGLE: text compare downlā¦
WHACK A RAT CSS GAME ----------------------------------------------------------------------------------------------------------------- ReadMore: https://dzone.com/articles/css3-games-collection httā¦
Direct Links to your Files on Google Drive DIRECT LINKS TO YOUR FILES ON GOOGLE DRIVE - YouTube ā¶ 5:17 https://www.youtube.com/watch?v=ehue47G5ayc 14 hours ago - Uploaded by SAVE MONEY DIRECT LINKā¦
FLASH 8 DOWNLOAD DIRECT LINKS TO YOUR FILES ON GOOGLE DRIVE - YouTube ā¶ 5:17 https://www.youtube.com/watch?v=ehue47G5ayc 14 hours ago - Uploaded by SAVE MONEY DIRECT LINKS&nā¦
FLASH PLAYER SWF FILE DOWNLOAD ARCHIVES ---------------------------------------------------------------------------------------------------------------- FLASH PLAYER DOWNLOAD FROM ARCHIVES https://helpx.adobe.com/flaā¦
ON LINE JAVA LIBRARY -------------------------------------------------------------------------------------------------------- READ MORE: https://cdnjs.com/libraries https://code.angularjs.org/ httpā¦
HTML CSS GREEN COMMENTS NOTEPAD++ ------------------------------------------------------------------------------------------------------------------------- READ MORE: https://www.youtube.com/watch?v=Abqwpg5mp_Uā¦
RELATED POST WIDGET LIST WITHOUT THUMBNAIL ------------------------------------------------------------------------------------------------------- FIND HEAD </head> TAG AND PASTE BELOW CODE WHEN Wā¦
RADIO BUTTON SLIDER TO KEY FRAME SLIDER ------------------------------------------------------------------------------------------------------------ Read More: https://codepen.io/macbobbitt_/pen/jmEBL https://codepeā¦
FLICKITY SLIDER SCROLL WITH RADIO NEXT PREV BUTTON ----------------------------------------------------------------------------------------------------------- ReadMore: http://codepen.io/desandro/pen/bNLGNZ view-source:http://sā¦
GOOGLE FILTER BUTTON IN IMAGE SEARCH ------------------------------------------------------------------------------------------------------ SEARCH IN GOOGLE: Google Image Search and search for any query,&nbsā¦
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.