• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 197
  • Last Modified:

Tying to use CSS in creation of an "X" button

Hey all.

I've tried googling this and I can't find a viable solution.

What I want to do is mimic the way Netflix displays the "X" button when you remove an item from the instant queue, but I want to do it without images.

Is this possible? I've tried using a letter X and, on hover, adjusted the size, text-shadow etc but I can't get it to look the way I want.

Any ideas?
0
Webspeeder
Asked:
Webspeeder
1 Solution
 
Jagadishwor DulalBraces MediaCommented:
Can you post your code here?
0
 
mickey159Commented:
Do you want this?

http://jsbin.com/ebidah/1/edit
0
 
WebspeederAuthor Commented:
I can't really post code, as there is no code to post. Best I could do is try to get screenshot of before and on hover.

The JSFiddle page you posted doesn't do anything on hover. Basically it's an X that, when hovered over, it changes from a plain blue X on a white background to a white X on a blue background with the "background" being "raised". Sort of like it was inflated with air on hover, the edges would have some shadow effect making it look raised.
0
Independent Software Vendors: 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!

 
WebspeederAuthor Commented:
Here are before and on hover screenshots.

Before hover
On Hover
0
 
soupBoyCommented:
here is a 'proof of concept'....at best.

Adding x to list list item

I used an image for the x, but it is encoded as the background image, so no image to download, but the browser does have to build it.

Here is the HTML:
<div class="container">
    <ul>
        <li class="header row">
            <ul>
                <li>Header One</li>
                <li>Header Two</li>
                <li>Header Three</li>
                <li>Header Four</li>
                <li>Header Five</li>
            </ul>
        </li>
        
        <li class="row data">
            <ul>
            <li>item info</li>
            <li>item info</li>
            <li>item info</li>
            <li>item info</li>
            <li></li>
            </ul>
        </li>
        <li class="row data">
            <ul>
            <li>item info</li>
            <li>item info</li>
            <li>item info</li>
            <li>item info</li>
            <li></li>
            </ul>
        </li>
        <li class="row data">
            <ul>
            <li>item info</li>
            <li>item info</li>
            <li>item info</li>
            <li>item info</li>
            <li></li>
            </ul>
        </li>
    </ul>
</div>

Open in new window

Here is the CSS:
*, *:before, *:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
ul{
    list-style-type: none;
    display: block;
    width: 100%;
    overflow: hidden;
}

li li{
    float: left;
    width: 20%;
    display: block;
    text-align: center;
    min-height: 2em;
}
.header{
    background: #99CCFF;
    color: #333;
    font-weight: bold;
}
.row{
    display: block;
    border-bottom: 1px dotted #999;
    line-height: 2em;
}
.row:nth-child(even){
    background: #dedede;   
}
.data:hover{
    background: #999;
}

.cross{
    width:            20px;
	height:           20px;
	background-image: url('data:image/jpg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3NC83Nzc3Nzc3Nyw3Nzc3Mjc0Nzc3LDc3Nzc3Nzc3Nzc3NzcrN//AABEIABQAFAMBEQACEQEDEQH/xAAYAAACAwAAAAAAAAAAAAAAAAAFBwIEBv/EAC4QAAEDAgMGAwkAAAAAAAAAAAIBAwQFBgARExIUITFBUWFxoQciJDJCUrHh8f/EABoBAAEFAQAAAAAAAAAAAAAAAAUBAgMEBgD/xAAlEQACAQMCBQUAAAAAAAAAAAABAgMABBEFIRIxQVFhIjKx0fD/2gAMAwEAAhEDEQA/ADV/3BUyr6RG9SKzDNDaROCuF0PxTtgbcyPx4G2K1mk2luIONvUW5+PH3VOt3jOqcaLrObvu+RmTRKO2aci/XfDXndgM9KmttNghZsDOe/QdqYlkViVXLfZmzWSbcUlFCVMtVE5Gnn+UXF+By6ZIrN6jbpb3BSM5Hx4pc+0y5mZNbOFpD8CSghbPvkvXNe39xUuXy2O1GtKt+CIPn3Vg5kp51R1gIBIUIBUckVOi8eeKpBowjJggU/fZ9XDr9ssSnmgbdbJWTQB2RVRyyVE8lT1wVhfjTNYzUIBBOVByDvU7gsyi3BPjzajHJXmVTNWy2dUU+k+6euFeJXOTTILyaFSiHY/tqlcloUe448dmcyre75I0bGQEI/by+XwxzxK43pILuWAkqedGIMOPT4jUSEyLLDQ7IAKcETDwABgVA7s7FmOSa//Z');

background-repeat: no-repeat;
}
.cross:hover{
    cursor: pointer;
}

Open in new window

Here is the small amount of jQuery:
$('.data').hover(
    function(){
        $(this).find('li:last-of-type').addClass("cross");        
    },
    function(){
        $(this).find('li:last-of-type').removeClass("cross");    
    }
);

$('.data li:last-of-type').on('click', function(){
    alert('you clicked the x');
});

Open in new window

0
 
Slick812Commented:
greetings  Webspeeder, , looked at the two Images, and the Hover you want to display, I really do not know the NetFlick methods to do this, , but below is some code that looks to me to do what you want.
<style>
.xbut {
width:16px;
height:16px;
text-align:center;
color:#000;
font-weight:bold;
line-height:16px;
font-size:15px;
font-family:arial,helvetica,sans-serif;
cursor:pointer;
}

.xbut:hover {
color:#fff;
background:#7cf;
-webkit-border-radius:4px;
-moz-border-radius:4px;
-ms-border-radius:4px;
-o-border-radius:4px;
border-radius:4px;
-webkit-box-shadow:inset -3px -3px 3px rgba(087,087,087,0.5);
box-shadow:inset -3px -3px 3px rgba(087,087,087,0.5);
}
</style>

<div class="xbut" onclick="doDelete();">X</div>

Open in new window

This works in a couple of different recent version browsers, BUT I know that the  "box-shadow"   and the  "border-radius" is NOT supported in some older browsers (especially I.E.)
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

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