html+css3+jquery鼠标悬停背景渐变按钮

来源：互联网 2023-03-16 23:54:47 423

html css3 jquery鼠标悬停背景渐变按钮

工具/原料

adobe dreamweaver

方法/步骤

准备好需要用到的图标。

html css3 jquery鼠标悬停背景渐变按钮

新建html文档。

html css3 jquery鼠标悬停背景渐变按钮

书写hmtl代码。

div id="content">

h1>html css3 jquery鼠标悬停背景渐变按钮/h1>

a href="#" class="button">/a>/

br/>br/>

h1>html css3 jquery鼠标悬停背景渐变按钮/h1>

a href="#" class="otherbutton">/a>/

br/>br/>

h1>html css3 jquery鼠标悬停背景渐变按钮/h1>

a href="#" class="homebutton">/a>

a href="download.zip" class="downloadbutton">/a>

/div class="clearer"/>br/>

html css3 jquery鼠标悬停背景渐变按钮/br/>br/>

div id="column1">a href="#" class="donatebutton">/a>/div>

div id="column2">a href="#" class="donatebutton_alt">/a>/div>

/div>

html css3 jquery鼠标悬停背景渐变按钮

书写css代码。

body { margin: 0; padding: 0; background: #f9f9f9; }

p { margin: 0; padding: 0; clear: both; color: #666; font-family: Georgia, serif; font-size: 11px; line-height: 18px; }

a:link, a:visited, a:hover, a:active { text-decoration: none; }

.clearer { clear: both; }

small { font-family: Arial, sans-serif; font-variant: small-caps; color: #809dba; }

h1 { font-family: Georgia, serif; font-size: 16px; font-weight: normal; color: #666; border-bottom: 1px solid #343434; margin-bottom: 15px; padding-bottom: 8px; margin-top: 20px; }

#content { width: 570px; padding: 30px; border: 1px solid #e4e4e4; margin: 0 auto; background: #fff; margin-top: 100px; margin-bottom: 100px; -border-radius: 5px; -moz-border-radius: 5px; }

#column1 { float: left; width: 250px; margin: 0px; padding: 0px; }

#column2 { padding: 0px; margin-left: 250px; margin-right: 0px; }

.button { width: 570px; height: 64px; display: block; background-image: url(../images/downloadbutton.png); background-position: top; }

.button:hover { width: 570px; background-position: bottom; height: 64px; background-image: url(../images/downloadbutton.png) no repeat; }

.otherbutton { clear: both; position: relative; display: block; height: 64px; width: 570px; background: url(../images/contact.png) no-repeat; background-position: 0 0; cursor: pointer; }

.otherbutton span.hover { position: absolute; display: block; height: 64px; width: 570px; background: url(../images/contact.png) no-repeat; background-position: bottom; }

.downloadbutton { float: left; width: 107px; height: 38px; display: block; background-image: url(../images/twobuttons.png); background-position: top right; }

.downloadbutton span.hover { position: absolute; display: block; width: 107px; height: 38px; background-position: bottom right; background-image: url(../images/twobuttons.png); }

.homebutton { float: left; width: 120px; height: 38px; display: block; background-image: url(../images/twobuttons.png); background-position: top left; }

.homebutton span.hover { position: absolute; display: block; width: 120px; height: 38px; background-position: bottom left; background-image: url(../images/twobuttons.png); }

.donatebutton { clear: both; position: relative; display: block; height: 128px; width: 128px; background: url(../images/donate.png) no-repeat; background-position: 0 0; cursor: pointer; }

.donatebutton span.hover { position: absolute; display: block; height: 128px; width: 128px; background: url(../images/donate.png) no-repeat; background-position: bottom; }

.donatebutton_al { display: block; height: 128px; width: 128px; background: url(../images/donate.png) no-repeat; background-position: 0 0; cursor: pointer; }

.donatebutton_al:hover { height: 128px; width: 128px; background: url(../images/donate.png) no-repeat; background-position: bottom; }

html css3 jquery鼠标悬停背景渐变按钮