Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

how to correct css3 button issue

Posted on 2014-02-11
2
Medium Priority
?
291 Views
Last Modified: 2014-02-11
I have created css3 button like below:
Html:
<section id="startbutton"><a href="#startbutton" id="starticon">&#xF04b;</a></section>

Open in new window

css:
a {
font-family: "FontAwesome";
text-shadow: 0px 1px 1px rgba(250,250,250,0.1);
font-size: 32pt;
display: block;
position: relative;
text-decoration: none;
box-shadow: 0px 3px 0px 0px rgb(34,34,34),
0px 7px 10px 0px rgb(17,17,17),
inset 0px 1px 1px 0px rgba(250, 250, 250, .2), 
inset 0px -12px 35px 0px rgba(0, 0, 0, .5);
width: 70px;
height: 70px;
border: 0;
color: rgb(37,37,37);
border-radius: 35px;
text-align: center;
line-height: 79px;
background-color: rgb(83,87,93);

transition: color 350ms ease, text-shadow 350ms;
-o-transition: color 350ms ease, text-shadow 350ms;
-moz-transition: color 350ms ease, text-shadow 350ms;
-webkit-transition: color 350ms ease, text-shadow 350ms;
}
a:before {
content: "";
width: 80px;
height: 80px;
display: block;
z-index: -2;
position: absolute;
background-color: rgb(26,27,29);
left: -5px;
top: -2px;
border-radius: 40px;
box-shadow: 0px 1px 0px 0px rgba(250,250,250,0.1), 
 inset 0px 1px 2px rgba(0, 0, 0, 0.5);
}
a.on {
box-shadow: 0px 0px 0px 0px rgb(34,34,34),
0px 3px 7px 0px rgb(17,17,17), 
inset 0px 1px 1px 0px rgba(250, 250, 250, .2), 
inset 0px -10px 35px 5px rgba(0, 0, 0, .5);
background-color: rgb(83,87,93);
top: 3px;
color: #fff;
text-shadow: 0px 0px 3px rgb(250,250,250);
}

Open in new window

Above code creates css3 button. Please refer screenshot right side button.
But I don't want to use '<a>' element. So I have changed this to '<em>' and respective coding as below:
Html:
<section id="startbutton1"><em id="starticon1">&#xF04b;</em></section>

Open in new window

css:
em {
font-family: "FontAwesome";
text-shadow: 0px 1px 1px rgba(250,250,250,0.1);
font-size: 32pt;
display: block;
position: relative;
text-decoration: none;
box-shadow: 0px 3px 0px 0px rgb(34,34,34),
0px 7px 10px 0px rgb(17,17,17),
inset 0px 1px 1px 0px rgba(250, 250, 250, .2), 
inset 0px -12px 35px 0px rgba(0, 0, 0, .5);
width: 70px;
height: 70px;
border: 0;
color: rgb(37,37,37);
border-radius: 35px;
text-align: center;
line-height: 79px;
background-color: rgb(83,87,93);

transition: color 350ms ease, text-shadow 350ms;
-o-transition: color 350ms ease, text-shadow 350ms;
-moz-transition: color 350ms ease, text-shadow 350ms;
-webkit-transition: color 350ms ease, text-shadow 350ms;
}
em:before {
content: "";
width: 80px;
height: 80px;
display: block;
z-index: -2;
position: absolute;
background-color: rgb(26,27,29);
left: -5px;
top: -2px;
border-radius: 40px;
box-shadow: 0px 1px 0px 0px rgba(250,250,250,0.1), 
 inset 0px 1px 2px rgba(0, 0, 0, 0.5);
}
em.on {
box-shadow: 0px 0px 0px 0px rgb(34,34,34),
0px 3px 7px 0px rgb(17,17,17), 
inset 0px 1px 1px 0px rgba(250, 250, 250, .2), 
inset 0px -10px 35px 5px rgba(0, 0, 0, .5);
background-color: rgb(83,87,93);
top: 3px;
color: #fff;
text-shadow: 0px 0px 3px rgb(250,250,250);
}

Open in new window

Above code has some issue. Please refer screenshot left side button. How to solve this issue. Please advice.
screenshot.png
0
Comment
Question by:JohnLourdu
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 35

Accepted Solution

by:
Robert Schutt earned 2000 total points
ID: 39849907
The <em> tag displays italicized by default. You can take that off by putting this in the em's CSS:
font-style: normal;

Open in new window

and the arrow character should display straight up again.
0
 

Author Closing Comment

by:JohnLourdu
ID: 39849927
Thanks a lot. It works.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

It is a general practice to get rid of old user profiles on a computer  in a LAN environment. As I have been working with a company in a LAN environment where users move from one place to some other place at times. This will make many user profil…
The Windows functions GetTickCount and timeGetTime retrieve the number of milliseconds since the system was started. However, the value is stored in a DWORD, which means that it wraps around to zero every 49.7 days. This article shows how to solve t…
Learn the basics of strings in Python: declaration, operations, indices, and slicing. Strings are declared with quotations; for example: s = "string": Strings are immutable.: Strings may be concatenated or multiplied using the addition and multiplic…
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
Suggested Courses

598 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question