Transition Only for The Border on Hover, But Not for Background

Transition only for the border on hover, but not for background

What you need to do is set which property you want to transistion properly. Currently you have it as "all" but it needs to be either "background-color" or "border-color" based on which you want to be transitioned.

 transition: border-color 1s ease;  

http://jsfiddle.net/u3Ahk/

Add a CSS border on hover without moving the element

You can make the border transparent. In this way it exists, but is invisible, so it doesn't push anything around:

.jobs .item {
   background: #eee;
   border: 1px solid transparent;
}

.jobs .item:hover {
   background: #e1e1e1;
   border: 1px solid #d0d0d0;
}

<div class="jobs">
  <div class="item">Item</div>
</div>

Transition property weird effect on border size on hover

The reason for this happening is how the browser optimizes rendering. For animating / transitioning effects it often separates the affected element into a separate "composition layer" for performance reasons.

You can try several ways to attempt to fix the graphical issue:

1. add will-change attribute in order to tell the browser to keep the element on a separate layer

2. modify your transition: all 1s to a more specific one (e.g. transition: color 1s, border-bottom-color 1s). Also make sure to only modify the border-bottom-color attribute, not the whole border-bottom attribute with size and type (even though it stays the same)

CSS transition border and background at the same time

Here is a working code,

#yourdiv {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: yellow;
  border: 5px solid black;    
  transition: border 500ms ease-out; 
  -webkit-transition: border 500ms ease-out; 
  -moz-transition: border 500ms ease-out;
  -o-transition: border 500ms ease-out;
}

#yourdiv:hover{
  border: 10px solid red;
  background-color: red;
}

Hover effect : expand bottom border

To expand the bottom border on hover, you can use transform:scaleX'(); (mdn reference) and transition it from 0 to 1 on the hover state.

Here is an example of what the border hover effect can look like :

The border and transition are set on a pseudo element to prevent transitioning the text and avoid adding markup.

To expand the bottom border from left or right, you can change the transform-origin property to the left or right of the pseudo element:

h1 { color: #666;display:inline-block; margin:0;text-transform:uppercase; }h1:after {  display:block;  content: '';  border-bottom: solid 3px #019fb6;    transform: scaleX(0);    transition: transform 250ms ease-in-out;}h1:hover:after { transform: scaleX(1); }h1.fromRight:after{ transform-origin:100% 50%; }h1.fromLeft:after{  transform-origin:  0% 50%; }

<h1 class="fromCenter">Expand from center</h1><br/><h1 class="fromRight">Expand from right</h1><br/><h1 class="fromLeft">Expand from left</h1>

Unable to get hover background color work with diagonal cut in CSS

You can just add a background transition to .btn-donate and border transition to .btn-donate:before like so:
(added padding bottom to see things)

body {
  margin-top: 15px;
}
.btn-primary {
    background-color: #2c9ff5;
    border-color: #2c9ff5;
    text-transform: capitalize;
}
.btn.btn-primary:hover {
    background-color: #45aff6;
    border-color: #45aff6;
}
.btn-donate {
    background-color: #053a86;
    color: #fff;
    margin-left: 15px;
    padding-left: 40px;
    padding-right: 30px;
  padding-top: 2px;
  padding-bottom: 1rem;
    text-transform: uppercase;
    border-radius: 4px 0 0 4px;
  height: 30px;
  position: relative;
  border: none;
  transition: .3s  ease background;
}
.btn-donate:before {
  content: '';
  position: absolute;
  top: 0; 
  left: 0;
  border-top: 30px solid white;
  border-right: 20px solid #053a86;
  width: 0;
  transition: .3s ease border;
}
.btn-donate:hover::before {
    border-right: 20px solid #45aff6;
}

<a href="#" class="btn btn-primary btn-donate">Donate</a>

---

Related Topics