logo-dw

Go Back   Dreamweaver Club Forums > Graphic Design > Flash
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 10-28-2015, 12:41 PM   #1
blueboy90780
 
Join Date: Oct 2015
Posts: 1
Question 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
blueboy90780 is offline   Reply With Quote
Old 10-29-2015, 02:48 AM   #2
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,176
Default

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
edbr is online now   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 01:43 AM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com