I am attempting to incorporate a transition effect on specific bootstrap buttons.
The issue lies with the height and width properties. They change instantly without taking into account the transition duration property.
Keep in mind that all other properties adjust within the specified duration (2s in this instance).
HTML
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
<button type="button" data-toggle="modal" data-target="#infoModal" class="btn btn-outline-warning mt-5 mb-3 3mr-3 ">Learn More</button>
</div>
CSS
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
.btn-outline-warning {
border-color: white;
transition: all;
transition-duration: 2s;
}
.btn-outline-warning:hover {
border-color: rgb(255, 136, 0);
background-color: rgba(0,0,0,.5);
transform: rotate(20deg);
width: 300px;
height: 100px;
}
Check out my JSFiddle for further clarification and demonstration.