Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 300
  • Last Modified:

how to correct css3 button issue

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
JohnLourdu
Asked:
JohnLourdu
1 Solution
 
Robert SchuttSoftware EngineerCommented:
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
 
JohnLourduAuthor Commented:
Thanks a lot. It works.
0

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now