Creating CSS Colorful Link Buttons -- Step 2: Insert the Black Button CSS Family

You are at the section Creating CSS Colorful Link Buttons

Step 2: Insert the Black Button CSS Family

To create hoverable black buttons as links, just copy and paste these onto your HTML template between the <style> and </style> tags like this:

.sidemenu1a {
display: inline-block; text-decoration: none; border:1px solid #000000; border-radius: 8px;
margin: 2px 2px; padding: 0px 2px; transition-duration: 0.2s;
}
a.sidemenu1a:link { font-family: tahoma, arial, sans-serif, helvetica; color:#000000; background-color:#ffffff }
a.sidemenu1a:visited { color:#000000; background-color:#efefef }
a.sidemenu1a:hover { color:#ffffff; background-color:#000000; text-decoration: none }
a.sidemenu1a:active { color:#000000; background-color:#000000 }
.sidemenu1a1 {
display: inline-block; text-decoration: none; border:1px solid #000000; border-radius: 8px;
margin: 2px 2px; padding: 0px 2px; transition-duration: 0.2s;
}
a.sidemenu1a1:link {
font-family: tahoma, arial, sans-serif, helvetica; color:#ffffff; background-color:#000000;
}
a.sidemenu1a1:hover { text-decoration: none }
a.sidemenu1a1:visited { color:#ffffff; background-color:#000000 }

Note that the color code #000000 is the color black, and #ffffff is the color white. The button has a black colored text and border with a white background.

The buttons have no text-decoration, the border is one pixel with a solid black border #000000, the border radius that makes the button curvy is six pixels, the margin is two pixels, the padding is two pixels and the transition duration is 2/10 of a second.

There is also a visited background color of a slightly darker white #efefef.

When you hover over the button, the colors of the text and background flip with each other, but the background border remains the same: black.

When you click on the button, the background color turns black.

Just remember to not put the style CSS lines between the <body> and </body> tags or the CSS may not work right.

Step 2: Insert the Black Button CSS Family

Help Support Our Ad-Free Web Section

Just use our PayPal link to pay.

Please Donate Cash to help pay for webhosting, domain payments, expenses and labor in keeping this section going. Thank you.

$2, $5, $10, $20, $50, $75, $100, $ANY

Notice Of Disclosure (updated June 2023):

"David Tanny is the owner and operator of the domains davesfunstuff.com and davidtanny.com"

Website Cookie Policy