How do I make animated size buttons (urgent, need this before friday)

blueboy90780 · 10-28-2015, 12:41 PM

Hello, I'm a begginner at Dreamweaver and I'm currently making a website for my homework. This is an urgent question as my homework is due on this week: friday. So if possible, can you answer this question AS SOON as possible please?

When I mean by "How do I make animated size buttons" I ment that how do I make buttons that changes size as you hover over them. I don't want to use a flash button since they took too much effort in paint, so could you also decorate the button also? The button should be a square button with black backgrounds and white letters. I doesn't need to have any dropdown menu and should be movable (meaning movable around the page). The last time I asked for this, a friend of mine gave me a animated size button but it wasn't compatible with the page.

In order to prevent the buttons to not be compatible with the webpage, Here is my code of my website.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>GAMING NEWS!</title>
<link href="Css style and font.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#apDiv1 {
position: absolute;
width: 345px;
height: 317px;
z-index: 1;
left: 1106px;
top: 59px;
}
</style>
<link href="../../../../Documents/Testing Folders/AboutPageAssets/styles/aboutPageStyle.css" rel="stylesheet" type="text/css" />
</head>
<table width="0" border="0">
<tr>
<th width="450" scope="row"><a href="Mat Pat Theory.html"><img src="Mat Pat why FNAF will never end theory.jpg" width="450" height="220" alt=""/></a></th>
<td width="357" valign="top"><h2><a href="Mat Pat Theory.html">The famouse game theory Mat Pat, makes a final video on FNAF 4</a></h2>
<h4>9th October 2015 - David Dung </h4>
<p>Mat Pat, also known as 'game theorist' shocked the internet with his final video on FNAF (Fight Night at Freddys) 4. After his previous video on he stated the....</p></td>
</tr>
</table>
<hr align="left" width="825"/>
<table width="300" height="60" border="0" align="right">
</table>
<table width="826" border="0">
<tr>
<th width="450" height="226" scope="row"><a href="Halo 5 Guardians.html"><img src="../Halo 5 Guardians.jpg" width="450" height="220" alt=""/></a></th>
<td width="360" valign="top" bgcolor="#FFFFFF"><h2><a href="Halo 5 Guardians.html">Halo 5:Guardian will launch a gameplay on world's biggest Aerial screen while flown above sydney.</a></h2>
<h4>9th October 2015 - David Dung </h4>
<p>Halo 5: Guardian will be released on 27th October just 4 days after the release of Assassin Creed Syndicate. With that, Xbox announced that they plan to show the first 15 minutes gameplay of....</p></td>
</tr>
</table>
<hr align="left" width="825"/>
<table width="826" border="0">
<tr>
<th width="450" scope="row"><a href="Rainbow Six Siege.html"><img src="TF2 SFM News/Tom Clancy's Rainbow Six Siege.jpg" width="450" height="220" /></a></th>
<td width="360" valign="top"><h2><a href="Rainbow Six Siege.html">Tom Clancy's Rainbows 6 Siege makes a history for team-based FPS games.</a></h2>
<h4>9th October 2015 - David Dung </h4>
<p>When Ubisoft announced last year at E3 showcase. Ubisoft team, Rainbow six siege instantly made an impact because of it's new style of multiplayer....</p></td>
</tr>
</table>
<hr align="left" width="825"/>
<table width="826" border="0">
<tr>
<th width="450" height="224" scope="row"><a href="Fallout 4 Page.html.html"><img src="TF2 SFM News/Fallout 4.jpg" width="450" height="220" /></a></th>
<td width="360" valign="top"><h2><a href="Fallout 4 Page.html.html">A new version of Fallout is coming out in Novermber 10th.</a></h2>
<h4>9th October 2015 - David Dung </h4>
<p>Bethesda Game Studio introduces a new game in the Fallout series along with Fallout Shelter gaming app coming out at the same time. This time the game....</p></td>
</tr>
</table>
<hr align="left" width="825"/>
<table width="826" border="0">
<tr>
<th width="450" scope="row"><a href="Assassin Creed Syndicate Microtransaction.html"><img src="Assassin's Creed Syndicate.jpg" width="450" height="220" /></a></th>
<td width="360" valign="top"><h2><a href="Assassin Creed Syndicate Microtransaction.html">Ubisoft developer declared no more microtransaction payment with the new Assassin Creed Syndicate</a></h2>
<h4>9th October 2015 - David Dung </h4>
<p>As some of you might've known, Ubisoft is releasing a new Assassin's Creed Syndicate <strong>this month....</strong></p></td>
</tr>
</table>
<p> </p>
<p class="background"> </p>
</html>

And here is my CSS:

@charset "utf-8";
/* CSS Document */

body {
background-color: #FFFFFF;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-style: normal;
line-height: normal;
color: #000;
}

a:active {
font-size: 16px;
}
a:link {
text-decoration: none;
color: #000000;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none; color: #0F3;
}
a:active {
text-decoration: none;
text-align: center;
font-size: 16px;
}
h1 {
color: #000;
}.colour {
color: #999;
}
h3 {
font-size: 14px;
color: #F33;
}
h4 {
color:#666
}

h5 {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #000;
text-decoration: none;
background-attachment: local;
background-color: #FFF;
}

body {
margin-left: auto;
margin-right: auto;
width: 92%;
max-width: 960px;
padding-left: 2.275%;
padding-right: 2.275%;
font-size: 16px;

}

#menu {
width: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: 0px;
position: absoulute;
font: bold;
font: caption;
font: bold;
font: tab;
font-family: inherit;
}
#menu ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#menu ul li {
float: left;
position: absolute;
}
#menu ul li a {
font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size: 110%;
color: #FFFFFF;
text-decoration: blink;
background-color: #333;
text-align: center;
display: block;
height: 50px;
width: 182.4px;
line-height: 40px;
border-right-width: thin;
border-bottom-width: thin;
border-right-style: inset;
border-bottom-style: inset;
border-right-color: #fff;
border-bottom-color: #99CCFF;

transition: background .5s, font-size .2s;
z-index:100;

}
#menu ul li a:hover {
font-size: 140%;
background-color:#63DFFF;
}
#menu ul li ul li a {
visibility: hidden;
height: 0px;
opacity:.5;
transition: all .2s ease-out;

}
#menu ul li ul {
position: absolute;
}
#menu ul li:hover ul li a {
height: 50px;
visibility: visible;
opacity: 1;
transition: all.3s ease-out;
}

Can you test the button animation in my website and see if it needs any improvement. Then send it to me

BTW: I'm using Dreamweaver CC

P:S: It would be better if you could make the text size bigger rather then smaller as it is being hovered.

Thanks

edbr · 10-29-2015, 02:48 AM

just stile link as a block with css.

crude example but should show you how to style them your self i hope

Code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
a{ display:block; background:black; width:50px;height:50px; font-size: 1em; color:white}
a:hover { display:block; background:#999; width:1000px; height:200px; font-size:3em;}

</style>
</head>

<body>
<a href="#">show me </a>
</body>
</html>

10-28-2015, 12:41 PM	#1
blueboy90780 Join Date: Oct 2015 Posts: 1	How do I make animated size buttons (urgent, need this before friday) Hello, I'm a begginner at Dreamweaver and I'm currently making a website for my homework. This is an urgent question as my homework is due on this week: friday. So if possible, can you answer this question AS SOON as possible please? When I mean by "How do I make animated size buttons" I ment that how do I make buttons that changes size as you hover over them. I don't want to use a flash button since they took too much effort in paint, so could you also decorate the button also? The button should be a square button with black backgrounds and white letters. I doesn't need to have any dropdown menu and should be movable (meaning movable around the page). The last time I asked for this, a friend of mine gave me a animated size button but it wasn't compatible with the page. In order to prevent the buttons to not be compatible with the webpage, Here is my code of my website. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>GAMING NEWS!</title> <link href="Css style and font.css" rel="stylesheet" type="text/css" /> <style type="text/css"> #apDiv1 { position: absolute; width: 345px; height: 317px; z-index: 1; left: 1106px; top: 59px; } </style> <link href="../../../../Documents/Testing Folders/AboutPageAssets/styles/aboutPageStyle.css" rel="stylesheet" type="text/css" /> </head> <table width="0" border="0"> <tr> <th width="450" scope="row"><a href="Mat Pat Theory.html"><img src="Mat Pat why FNAF will never end theory.jpg" width="450" height="220" alt=""/></a></th> <td width="357" valign="top"><h2><a href="Mat Pat Theory.html">The famouse game theory Mat Pat, makes a final video on FNAF 4</a></h2> <h4>9th October 2015 - David Dung </h4> <p>Mat Pat, also known as 'game theorist' shocked the internet with his final video on FNAF (Fight Night at Freddys) 4. After his previous video on he stated the....</p></td> </tr> </table> <hr align="left" width="825"/> <table width="300" height="60" border="0" align="right"> </table> <table width="826" border="0"> <tr> <th width="450" height="226" scope="row"><a href="Halo 5 Guardians.html"><img src="../Halo 5 Guardians.jpg" width="450" height="220" alt=""/></a></th> <td width="360" valign="top" bgcolor="#FFFFFF"><h2><a href="Halo 5 Guardians.html">Halo 5:Guardian will launch a gameplay on world's biggest Aerial screen while flown above sydney.</a></h2> <h4>9th October 2015 - David Dung </h4> <p>Halo 5: Guardian will be released on 27th October just 4 days after the release of Assassin Creed Syndicate. With that, Xbox announced that they plan to show the first 15 minutes gameplay of....</p></td> </tr> </table> <hr align="left" width="825"/> <table width="826" border="0"> <tr> <th width="450" scope="row"><a href="Rainbow Six Siege.html"><img src="TF2 SFM News/Tom Clancy's Rainbow Six Siege.jpg" width="450" height="220" /></a></th> <td width="360" valign="top"><h2><a href="Rainbow Six Siege.html">Tom Clancy's Rainbows 6 Siege makes a history for team-based FPS games.</a></h2> <h4>9th October 2015 - David Dung </h4> <p>When Ubisoft announced last year at E3 showcase. Ubisoft team, Rainbow six siege instantly made an impact because of it's new style of multiplayer....</p></td> </tr> </table> <hr align="left" width="825"/> <table width="826" border="0"> <tr> <th width="450" height="224" scope="row"><a href="Fallout 4 Page.html.html"><img src="TF2 SFM News/Fallout 4.jpg" width="450" height="220" /></a></th> <td width="360" valign="top"><h2><a href="Fallout 4 Page.html.html">A new version of Fallout is coming out in Novermber 10th.</a></h2> <h4>9th October 2015 - David Dung </h4> <p>Bethesda Game Studio introduces a new game in the Fallout series along with Fallout Shelter gaming app coming out at the same time. This time the game....</p></td> </tr> </table> <hr align="left" width="825"/> <table width="826" border="0"> <tr> <th width="450" scope="row"><a href="Assassin Creed Syndicate Microtransaction.html"><img src="Assassin's Creed Syndicate.jpg" width="450" height="220" /></a></th> <td width="360" valign="top"><h2><a href="Assassin Creed Syndicate Microtransaction.html">Ubisoft developer declared no more microtransaction payment with the new Assassin Creed Syndicate</a></h2> <h4>9th October 2015 - David Dung </h4> <p>As some of you might've known, Ubisoft is releasing a new Assassin's Creed Syndicate <strong>this month....</strong></p></td> </tr> </table> <p> </p> <p class="background"> </p> </html> And here is my CSS: @charset "utf-8"; /* CSS Document */ body { background-color: #FFFFFF; font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; font-style: normal; line-height: normal; color: #000; } a:active { font-size: 16px; } a:link { text-decoration: none; color: #000000; } a:visited { text-decoration: none; } a:hover { text-decoration: none; color: #0F3; } a:active { text-decoration: none; text-align: center; font-size: 16px; } h1 { color: #000; }.colour { color: #999; } h3 { font-size: 14px; color: #F33; } h4 { color:#666 } h5 { font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; text-transform: none; color: #000; text-decoration: none; background-attachment: local; background-color: #FFF; } body { margin-left: auto; margin-right: auto; width: 92%; max-width: 960px; padding-left: 2.275%; padding-right: 2.275%; font-size: 16px; } #menu { width: 0px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: 0px; position: absoulute; font: bold; font: caption; font: bold; font: tab; font-family: inherit; } #menu ul { margin: 0px; padding: 0px; list-style-type: none; } #menu ul li { float: left; position: absolute; } #menu ul li a { font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif; font-size: 110%; color: #FFFFFF; text-decoration: blink; background-color: #333; text-align: center; display: block; height: 50px; width: 182.4px; line-height: 40px; border-right-width: thin; border-bottom-width: thin; border-right-style: inset; border-bottom-style: inset; border-right-color: #fff; border-bottom-color: #99CCFF; transition: background .5s, font-size .2s; z-index:100; } #menu ul li a:hover { font-size: 140%; background-color:#63DFFF; } #menu ul li ul li a { visibility: hidden; height: 0px; opacity:.5; transition: all .2s ease-out; } #menu ul li ul { position: absolute; } #menu ul li:hover ul li a { height: 50px; visibility: visible; opacity: 1; transition: all.3s ease-out; } Can you test the button animation in my website and see if it needs any improvement. Then send it to me BTW: I'm using Dreamweaver CC P:S: It would be better if you could make the text size bigger rather then smaller as it is being hovered. Thanks

10-29-2015, 02:48 AM	#2
edbr Join Date: Aug 2005 Location: Bali Posts: 11,216	just stile link as a block with css. crude example but should show you how to style them your self i hope Code: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <style> a{ display:block; background:black; width:50px;height:50px; font-size: 1em; color:white} a:hover { display:block; background:#999; width:1000px; height:200px; font-size:3em;} </style> </head> <body> <a href="#">show me </a> </body> </html> __________________ If you're happy and you know it shake your meds! different style links examples Flight / Hotel search Free script download Bali Villas

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode