PDA

View Full Version : 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:D

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

<!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>