CreateaFreeWebsite
with Responsive Web Design
The navigational system of your website is one of its most important features.
You can use simple hyperlinks.
You can use fancy 'Navbars' built with Javascript.
You can use simple button images with your hyperlinks.
You can also create buttons using CSS and HTML5 code which mimic the mechanical aspects of Js navbars. And these won't slow your pages or create errors in browsers that don't support Js.
Most of the code is set up in the Style Sheets.
<p><a href="" class="button">Button</a></p>
Size is determined by size of text and padding.
Us your imagination on the colors and shadow changes.
.left p a.button {
text-align:center;
padding: 10px 1.25rem !important;
background-color: #ff9900;
box-shadow: -4px -4px 8px #000 inset;
border: solid #000 1px;
border-radius: 45px;
}
.left p a.button {
font-family: arial;
font-weight: bold;
font-size: 1.25rem;
color: #fff !important;
text-decoration: none;
text-shadow: 1px 1px 1px #000;
margin: 0 0
}
.left p a:hover.button {
font-weight:normal;
background-color: #eee;
color:#000 !important;
text-decoration: none;
box-shadow: 4px 4px 10px #000 inset;
text-shadow:none;
border: solid #0e0e0e 1px;
}
Size is determined by size of text and padding.
Us your imagination on the colors and shadow changes.
a.button2 {
background: #eee;
box-shadow: 4px 4px 8px #000;
border: solid #0000 2px;
}
a.button2 {
font-family: arial;
font-size: 1.25rem;
text-align:center;
color: #000;
text-shadow: none;
text-decoration:none;
padding: 10px 1.25rem;
}
a:hover.button2 {
color: #696969;
text-decoration: none;
box-shadow: 4px 4px 8px #000 inset;
border: solid #000 1px;
}
The trend in web design today seems to have moved to long scrolling pages rather than multiple pages that require clicking. Some are even telling us that the click is dead. Personally, I believe we'll end up with a combination of the two.
Enter The Top Button and The Up Button
I can't imagine what a nightmare these endlessly scrolling pages of 10000+ words are for SEO!! May be the reason you don't see these Magnificent Masterpieces in the SERPS. Pay Google or sink into the BLACK HOLE!
<p><a href="#heading" class="top-button">Top</a></p> Specify the location you want to jump to like so: <header id="heading">
💡 Time Out for a teaching Moment
In CSS, the !important declaration is used to give a specific style rule the highest priority, overriding any other conflicting rules, regardless of specificity or source order. It ensures that the style is applied no matter what.(From Copilot)
We use it in the CSS on the right (once again because I'm LAZY) to override the settings for the anchor tags in the main division.
p a.top-button {
width: 40px;
color: #fff !important;
background: #0066cc;
box-shadow: 2px 2px 4px #000;
border: none;
border-radius: 90%;
margin: 0 auto
}
p a.top-button {
font-family: Roboto , arial;
font-size: 18px;
text-align: center;
font-weight: bold;
text-shadow : 1px 1px 1px #000;
text-decoration: none;
padding: 1.5% 1%;
}
p a:hover.top-button {
color: #000 !important;
background-color: #fff;
box-shadow: 2px 2px 6px #000 inset;
text-shadow:none;
border: none;
}
<p> <a href="#heading" style="text-decoration: none" title="Go To Top"> <span style="font-size :50px; text-shadow: 1px 1px 2px #000">👆 </span><a> </p>
or 🔝 Wingding: 🔝
You could convert the Top button to an Up button and place your destination tags at various desired page break points. The CSS would be the same.
<p><a href="#pagebreak1" class="top-button">Up </a></p> Specify the location you want to jump to like so: <h2 id="pagebreak1">The Button 2
Hey! Search for days and you won't find this one.
Here we use the button tag with a Wingding and just a smidge of javascript.
Go Back buttons are active. Use Forward arrow to return.
<p class="goback"> <button title="Go Back" onclick="history.back()"> <span>👈</span> </button> </p>
or
Wingding: 🔙
p.goback button {
border:none;
background: transparent;
padding: 0 0; margin: 0 0
}
p.goback button span {
font-size :50px;
text-shadow: 1px 1px 2px #000;
padding: 0 0 ;
margin: 0 0
}
Here we use the button tag with an image and the same smidge of javascript.
Go Back buttons are active. Use Forward arrow to return.
<p class="goback"> <button title="Go Back" onclick="history.back()"> <img src="bullets/arrowbluel.gif" alt="Free bullets for web pages"> </button> </p>
p.goback button {
border:none;
background: transparent;
padding: 0 0; margin: 0 0
}
p.goback button img {
width :50px;
box-shadow: none;
padding: 0 0 ;
margin: 0 0
}
How easy is this? The Popover is a little ditty that toggles a message in and out of view. Copy , paste and restyle to your tastes. To Close: Press Escape or Click anywhere on the page.
<!-- Trigger Button --> <button style="color: #fff;background: #0066cc; font-weight: bold;padding:4px 4px" popovertarget="myPopover">POPOVER</button> <!-- Popover Element --> <div style="width:25%; padding: 2% 2%;border: dotted 3px #0066cc;margin: 0 auto" id="myPopover" popover> What you see is what you GIT! </div>
Dialog boxes can be a useful tool in web design. Use your imagination.
Copy and paste and change the inline style settings to your own tastes.
<dialog id="popup" style="width:75%;margin :0 auto;scrollbar-width:none"> <form method="dialog"> <button style="background:#0066cc; font-size: 1.25rem; color:#fff;padding: 4px 5px; margin: 1% 5%">Close</button> <div style="padding: 1% 5%;"> <h1>Content Here</h1> <p>Style as you would any web page</p> <p class="spacer"> </p> </div> <button style="background:#0066cc; font-size: 1.25rem; color:#fff;padding: 4px 5px; margin: 1% 5%">Close</button> </form> </dialog> <!--Popup Button--> <button onclick="popup.showModal()" style="background:#0066cc; font-size: 1.25rem; color:#fff;padding: 4px 10px"> Open Popup </button>
Have you found Thiings yet?.
Over 6000 Free 3D images that you can download (individually or the complete set) and use for personal or commercial projects. You have got to SEE this!!
Free Bullet Images, WingDings and WebDings
🔵 🔶 😀 🎈 🐝 🏀 👉 👲 💡 🍅
Have you tried our NEWEST template kit with scrolling columns?
Download Template Kit #601 - 4 Page Kit or Test Drive It!