Css3 Boder Transition - Css
How to make border transition effects in css3?
Snippet Code
Rate this page :
|
[ 0 votes]
|
The below code helps you to create border transition effects on hover in CSS3.
<style>
a {
background:green;
background-origin: border-box;
display: inline-block; width: 100px; height: 100px;
border-width: 50px;
border-color: rgba(0,0,0,0);
border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: 0.5s ease;
-moz-transition: 0.5s ease;
-ms-transition: 0.5s ease;
-o-transition: 0.5s ease;
transition: 0.5s ease;
}
a:hover {border-width: 0;border-color: rgba(0, 0, 0,0.8);}
.firstt{border-style: dashed;}
.second{border-style: double;}
.third{border-style: dotted;}
</style>
<a href="#" class="firstt"></a>
<a href="#" class="second"></a>
<a href="#" class="third"></a>
