Solved

how to correct css3 button issue

Posted on 2014-02-11
2
260 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
2 Comments
 
LVL 35

Accepted Solution

by:
Robert Schutt earned 500 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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Batch, VBS, and scripts in general are incredibly useful for repetitive tasks.  Some tasks can take a while to complete and it can be annoying to check back only to discover that your script finished 5 minutes ago.  Some scripts may complete nearly …
Recently, we decided that in order to stay competitive in today's IT world, we were going to have to develop and deploy a mobile app for our users and do it quickly. We felt that we were already behind the curve. Users of technology today are mov…
Learn the basics of lists in Python. Lists, as their name suggests, are a means for ordering and storing values. : Lists are declared using brackets; for example: t = [1, 2, 3]: Lists may contain a mix of data types; for example: t = ['string', 1, T…
Excel styles will make formatting consistent and let you apply and change formatting faster. In this tutorial, you'll learn how to use Excel's built-in styles, how to modify styles, and how to create your own. You'll also learn how to use your custo…

828 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