CODEWITHSUNDEEP
javascripthtmlcssangularjsangular-material
Ellone
Ellone

Reputation: 3898

Styling icon inside button

I have piece of code like this :

<md-button ng-repeat="s in savedSearchName" 
           ng-click="loadSearch(s)" ng-right-click="removeFilter($event, s)"
           class="filterButton">
   {{s}}
   <md-icon md-svg-src='style/images/icons/ic_close_24px.svg' class="buttonRemover"
            title="Remove filter" ng-click="removeFilter($event, s)"
   </md-icon>
</md-button>

And I'm trying to resize my md-icon and place it in the top-right corner of my button. SO I have the folowwing css :

.buttonRemover {
color: red;
position: relative;
width: 14px;
height: 14px;
right: -5px;
top : 0px;
float: right;
}

So first :

Why do I need to set a negative right ? (right: 0px doesn't place my icon next to the button's right-border). I'm guessing it has something to do with the float: right; but removing it makes the icon even further from the top-right corner.

Secondly :

How can I display my icon only when the mouse is hover the parent button ?

Upvotes: 0

Views: 1026

Answers (2)

Sofiene Djebali
Sofiene Djebali

Reputation: 4508

This should work ;) 

.filterButton {
     position:relative;
}

.filterButton:hover .buttonRemover {
    opacity:1;
}

.buttonRemover {
       color: red;
       position: absolute;
       width: 14px;
       height: 14px;
       right: 0px;
       top : 0px;
       opacity:0;
       transition:0.2s all linear;
}

Upvotes: 1

Spartak Lalaj
Spartak Lalaj

Reputation: 429

The following code should work:

.filterButton {
  position: relative;
}

.buttonRemover {
   // other styles
   position: absolute;
   top: 0;
   right: 0;
   display: none; // or visibility: hidden;
 }

.filterButton:hover .buttonRemover{
     display: block; // or visibility: visible
}

Upvotes: 1

Related Questions