边框颜色悬停效果问题

Question

I've tried to set a hover effect to an icon. When the cursor gets closer to that icon, the border colour of that icon will display but it should be in half radius. In my case I don't know how to do that and also I don't know whats wrong in my code. If anyone knows a way to achieve that, it will be very helpful for me.
For your reference i have uploaded my expected output image here.

 .round-right-arrow { border-radius: 24px; background: white; width: 40px; height: 40px; border-color: transparent; } .roundbtn { background: none; position: relative; } .roundbtn::before, .roundbtn::after { content: ''; position: absolute; width: 100%; height: 100%; } .spin { width: 37px; height: 37px; padding: 0; } .spin::before { border: 2px solid transparent; } .spin:hover::before { border-top-color: #ec7f4a; border-right-color: #ec7f4a; border-bottom-color: #ec7f4a; border-left-color: #ec7f4a; transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s; } .circle::before, .circle::after { border-radius: 100%; } 

 <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <div class="spin circle roundbtn"> <button class="round-right-arrow"> <i class="fa fa-arrow-right " aria-hidden="true"></i> </button> </div> 

Answer 1

Using transform:rotate(45deg) and remove right and bottom border

 .round-right-arrow { border-radius: 24px; background: white; width: 40px; height: 40px; border-color: transparent; } .roundbtn { background: none; position: relative; } .roundbtn::before, .roundbtn::after { content: ''; position: absolute; width: 100%; height: 100%; transform:rotate(45deg); -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); } .spin { width: 37px; height: 37px; padding: 0; } .spin::before { border: 2px solid #f2f2f2; } .spin:hover::before { border-top-color: #ec7f4a; border-left-color: #ec7f4a; transition: border-left-color 0.25s linear, border-top-color 0.25s linear 0.1s; } .circle::before, .circle::after { border-radius: 100%; } 

 <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <div class="spin circle roundbtn"> <button class="round-right-arrow"> <i class="fa fa-arrow-right " aria-hidden="true"></i> </button> </div> 

Answer 2

It seems that the following CSS determines where the border is shown:

.spin:hover::before {
  border-top-color: #ec7f4a;
  border-right-color: #ec7f4a;
  border-bottom-color: #ec7f4a;
  border-left-color: #ec7f4a;
  transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
}

Update it as below to prevent it from displaying t the top

 .round-right-arrow { border-radius: 24px; background: white; width: 40px; height: 40px; border-color: transparent; } .roundbtn { background: none; position: relative; } .roundbtn::before, .roundbtn::after { content: ''; position: absolute; width: 100%; height: 100%; } .spin { width: 37px; height: 37px; padding: 0; } .spin::before { border: 2px solid transparent; } .spin:hover::before { border-top-color: #ec7f4a; border-right-color: transparent; border-bottom-color: transparent; border-left-color: #ec7f4a; transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s; } .circle::before, .circle::after { border-radius: 100%; transform: rotate(225deg); } 

 <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <div class="spin circle roundbtn"> <button class="round-right-arrow"> <i class="fa fa-arrow-right " aria-hidden="true"></i> </button> </div> 

Answer 3

is that what you want ?

 .round-right-arrow { border-radius: 24px; background: white; width: 40px; height: 40px; border-color: transparent; } .roundbtn { background: none; position: relative; } .roundbtn::before, .roundbtn::after { content: ''; position: absolute; width: 100%; height: 100%; } .spin { width: 37px; height: 37px; padding: 0; } .spin::before { border: 2px solid transparent; } .spin:hover::before { border-top-color: #ec7f4a; border-right-color: transparent; border-bottom-color: transparent; border-left-color: #ec7f4a; transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s; } .circle::before, .circle::after { border-radius: 100%; transform: rotate(225deg); } 

 <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <div class="spin circle roundbtn"> <button class="round-right-arrow"> <i class="fa fa-arrow-right " aria-hidden="true"></i> </button> </div> 

Answer 4

added transparent color to border-top-color & border-top-color and used transform: rotate(315deg); to rotate it. thanks

 .round-right-arrow { border-radius: 24px; background: white; width: 40px; height: 40px; border-color: transparent; } .roundbtn { background: none; position: relative; } .roundbtn::before, .roundbtn::after { content: ''; position: absolute; width: 100%; height: 100%; } .spin { width: 37px; height: 37px; padding: 0; } .spin::before { border: 2px solid transparent; } .spin:hover::before { border-top-color: TRansparent; border-right-color: TRansparent; border-bottom-color: #ec7f4a; border-left-color: #ec7f4a; transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s; transform: rotate(315deg); } .circle::before, .circle::after { border-radius: 100%; } 

 <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <div class="spin circle roundbtn"> <button class="round-right-arrow"> <i class="fa fa-arrow-right " aria-hidden="true"></i> </button> </div>