Forum Home Forum Home > Expression Web > Free expression web template help
  New Posts New Posts RSS Feed - How to create mouseover/hover buttons/change color
  FAQ FAQ  Forum Search   Register Register  Login Login


Welcome to expression web help - thank you for joining us.

How to create mouseover/hover buttons/change color

 Post Reply Post Reply
Author
Message
PFY-SA View Drop Down
Just starting out
Just starting out
Avatar

Joined: 12 Feb 2014
Location: MO
Status: Offline
Points: 2
Post Options Post Options   Thanks (0) Thanks(0)   Quote PFY-SA Quote  Post ReplyReply Direct Link To This Post Topic: How to create mouseover/hover buttons/change color
    Posted: 12 Feb 2014 at 9:11pm
Hello everyone, over here wondering about creating mouseover/hover buttons in Expression Web 4.

Currently I have this website where the top buttons are brown when you mouseover them, however, I would like them to be blue.

http://praisesforyahweh.org/NEWEBPAGE.html

Next, the links beneath the blue rectangle that says home I would like to have a hover box like this:
about:blank - file:///C:/Users/Sarah/Pictures/yrmcapture.PNG

If you can help me with this that would be greatly appreciated. Also I am a beginner to coding so if you could explain in detail. Thank you,
SA
Back to Top
Sponsored Links


Back to Top
tcertain View Drop Down
Admin Group
Admin Group
Avatar

Joined: 04 Apr 2008
Location: United States
Status: Offline
Points: 3938
Post Options Post Options   Thanks (1) Thanks(1)   Quote tcertain Quote  Post ReplyReply Direct Link To This Post Posted: 13 Feb 2014 at 9:36am
In the code view of your webpage, at the top you will see this:
<style type="text/css">
---------------------------------------------------------------
Directly below that, go down until you see this:
.style20 {
    color: #C05E28;
}

------------------------------------------------------------------
Directly below that }  copy these lines of code into the code view of your page

.transparent {
    background-color: transparent;
}
.blue-background {
    background-color:#0587C5;
}

-------------------------------------------Do not include this break line or any others

your copied code should then look like this:

.style20 {
    color: #C05E28;
}

.transparent {
    background-color: transparent;
}
.blue-background {
    background-color:#0587C5;
}

TCertain
"The Truly Educated Never Graduate" - Author Unknown
Back to Top
MarshaB View Drop Down
Learning Fast
Learning Fast
Avatar

Joined: 19 Jun 2012
Location: NC
Status: Offline
Points: 83
Post Options Post Options   Thanks (0) Thanks(0)   Quote MarshaB Quote  Post ReplyReply Direct Link To This Post Posted: 19 Feb 2014 at 3:39am
I use this code in my css file to make buttons:
.button {
    font-size: 0.85em;
    color: #ffffff;
    padding: 5px;
    border-radius: 5px;
    background-color: #0071c0;
    text-decoration: none;
    font-weight: normal;
    box-shadow: 0 2px 3px #000;
}
.button:hover {
    color: #ffffff;
    padding: 5px;
    border-radius: 5px;
    background-color: #505050;
    text-decoration: none;
    font-weight: normal;
    box-shadow: 0 2px 3px #000;
}

-------------------------------------------------------------------
Then your html would look like this:

<span class="button">Button Name</span>

If you wanted your button to link to something, then it would look like this:

<span class="button"><a href="yourpage.html">Button Name</a></span>

------------------------------------------------------------------
This coding makes a rounded corners button with a mouseover color and a shadow on the button. To change the colors, change the hex code.

Hope this helps,
Marsha
Templates in Time

Back to Top
Oceanbluedigital View Drop Down
Just starting out
Just starting out


Joined: 30 Sep 2015
Location: Melbourne, AU
Status: Offline
Points: 2
Post Options Post Options   Thanks (0) Thanks(0)   Quote Oceanbluedigital Quote  Post ReplyReply Direct Link To This Post Posted: 30 Sep 2015 at 6:06am
a.button {
   display: -moz-inline-stack;
   display: inline-block;
   width: 391px;
   height: 62px;
   background: url("img/btncolor.png") no-repeat;
   line-height: 62px;
   vertical-align: text-middle;
   text-align: center;
   color: #ebe6eb;
   font-family: Zenhei;
   font-size: 39px;
   font-weight: normal;
   font-style: normal;
   text-shadow: #222222 1px 1px 0;
}
a.button a:hover{
     background: #383;
}
Back to Top
 Post Reply Post Reply
  Share Topic   

Forum Jump Forum Permissions View Drop Down



This page was generated in 0.035 seconds.