CSS Rollover (No Javascript)

CSS Rollover Buttons:

CSS is supported in automatic Embed Gadget for Google Sites.

Create a Rollover Button in Google sites using the

Method. This Method Support Most Normal CSS attributes.

Best Practice would be to use the standardized CSS. Some Browsers may not be compatible with anything beyond 

Chrome, Firefox or Internet Explorer 9+ required

Text Rollover Html & CSS Code:

<Object></Object> will automatically create an Embed Gadget, which support Embedded CSS.

Use the <Object> tag to embed your rollover html code.


<style type="text/css">

font-family: arial, helvetica, sans-serif;
margin: 0;
padding: 10;

.roll a
padding: 10;
display: block;
color: #000000;
font-size: 18px;
width: 150px;
height: 18px;
display: block;
text-decoration: none;

background-color: #ccc;
color: #eee;

cursor: pointer;


<div class="roll"><br>
<a target="_parent" href="http://www.Goopal.org">Rollover Text 01</a><br>
<a target="_blank" href="http://www.Goopal.org">Rollover Text 02</a>


Important CSS Tip:

Use target="_parent" to open the link in the parent.

Or target="_blank" to open in a new page.

Dev support:

Image Swap:
FancyBox Without JavaScript: ???


Google Sites JavaScript using 
Googles Javascript API Libraries.

Live Html Editor [Larger View] 

Edit your Inline CSS LIVE >>>

Copy and Paste the Following HTML code>>>