CODEWITHSUNDEEP
htmlcssbordertransition
Maëlle
Maëlle

Reputation: 653

Draw outline around button on hover

I would like to "draw" an outline around rectangle buttons, meaning I'd like for the border to transition but not fade in. I already have a bunch of effects on these buttons.. I tried to apply an already-made exemple of draw outline CSS but it didn't do anything..

Here's my code

function hoverIcons(classnm) {
  document.getElementById(classnm).css({height: '+=30%', width: '+=30%'});
}

function nothoverIcons(classnm) {
  document.getElementById(classnm).css({height: '+=30%', width: '+=30%'});
}
#menu {
  position: fixed;
  bottom: 20;
  right: 20;
  width: 80;
  height: 30px;
  background-color: Menu background;
  z-index: 10;
}

#mainicons {
  position: fixed;
  bottom: 20px;
  right: 193px;
  text-align: center;
}

#mainicons i {
  display: inline-block;
  margin-top: 0;
  margin-left: -3px;
  height: 30px;
  width: 50px;
  padding: 10px;
  color-color: Main icon;
  background-color: Main icon background;
  text-transform: uppercase;
  font-size: 15px;
  line-height: 30px;
  -webkit-transition: all .7s ease;
  -moz-transition: all .7s  ease;
  -o-transition: all .7s  ease;
  transition: all .7s  ease;
}

#mainicons i:hover {
  color-color: Hover;
  background-color: Main icon;
  transform: scale(1.1);
  -webkit-transition: all .7s ease;
  -moz-transition: all .7s  ease;
  -o-transition: all .7s  ease;
  transition: all .7s  ease;
}

/*-- BEGINNING BORDER EFFECT (PASTED) --*/
#mainicons {
  transition: color 0.25s;
  box-sizing: border-box;
}
#mainicons::before, #mainicons::after {
  box-sizing: inherit;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
}
#mainicons::before, #mainicons::after {
  border: 2px solid transparent;
  width: 0;
  height: 0;
}
#mainicons::before {
  top: 0;
  left: 0;
}
#mainicons::after {
  bottom: 0;
  right: 0;
}
#mainicons:hover {
  color: #97c5e0;
}
#mainicons:hover::before, #mainicons:hover::after {
  width: 100%;
  height: 100%;
}
#mainicons:hover::before {
  border-top-color: #97c5e0;
  border-right-color: #97c5e0;
  transition: width 0.25s ease-out,  height 0.25s ease-out 0.25s;
}
#mainicons:hover::after {
  border-bottom-color: #97c5e0;
  border-left-color: #97c5e0;
  transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
}



/*-- BEGINNING BORDER EFFECT (PASTED) --*/
/* originally written in SCSS


#mainicons {
    transition: color 0.25s;
    box-sizing: border-box;
    &::before,
  &::after {
    box-sizing: inherit;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;}

  &::before,
  &::after {
    border: 2px solid transparent;
    width: 0;
    height: 0;
  }

  &::before {
    top: 0;
    left: 0;
  }

  &::after {
    bottom: 0;
    right: 0;
  }
  
  &:hover {
    color: #97c5e0;
  }

  &:hover::before,
  &:hover::after {
    width: 100%;
    height: 100%;
  }

  &:hover::before {
    border-top-color: #97c5e0; 
    border-right-color: #97c5e0;
    transition:
      width 0.25s ease-out, 
      height 0.25s ease-out 0.25s; 
  }

  &:hover::after {
    border-bottom-color: #97c5e0;
    border-left-color: #97c5e0;
    transition:
      border-color 0s ease-out 0.5s,
      width 0.25s ease-out 0.5s,
      height 0.25s ease-out 0.75s; 
  }
}

*/
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>

<div id="menu">

<div id="mainicons" onmouseover="hoverIcons('mainicons')" onmouseout="nothoverIcons('mainicons')">
<a href="/" title="Home"><i class="fa fa-home"></i></a>
<a href="/ask" title="Ask"><i class="fa fa-envelope"></i></a>
<a href="/submit" title="Request"><i class="fa fa-pencil "></i></a>
<a href="/archive" title="Archive"><i class="fa fa-clock-o"></i></a>
</div>
</div>

I have to admit it's very complicated for me to understand what he/she tried to do for the outline thing (https://codepen.io/giana/pen/yYBpVY).. So if you have a better/easier way to do this, thanks a lot!!

Upvotes: 1

Views: 2410

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 105863

oups, i finally understood, effect is actually set on the container and you wish to set it on the links.

You basicly need to update the selector .

example

function hoverIcons(classnm) {
 // document.getElementById(classnm).css({height: '+=30%', width: '+=30%'});
}

function nothoverIcons(classnm) {
//  document.getElementById(classnm).css({height: '+=30%', width: '+=30%'});
}
#menu {
  position: fixed;
  bottom: 20;
  right: 20;
  width: 80;
  height: 30px;
  background-color: Menu background;
  z-index: 10;
}

#mainicons {
  position: fixed;
  bottom: 20px;
  right: 193px;
  text-align: center;
}

#mainicons a {
  transition: color 0.25s;
  display: inline-block;
  position: relative;
  margin: 0 25px;
  padding: 10px 20px;
  box-sizing: border-box;
}

a::before,
a::after {
  content: '';
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

a::before,
a::after {
  border: 2px solid transparent;
  width: 0;
  height: 0;
}

a::before {
  top: 0;
  left: 0;
}

a::after {
  bottom: 0;
  right: 0;
}

a:hover {
  color: #97c5e0;
}

a:hover::before,
a:hover::after {
  width: 100%;
  height: 100%;
}

a:hover::before {
  border-top-color: #97c5e0;
  border-right-color: #97c5e0;
  transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}

a:hover::after {
  border-bottom-color: #97c5e0;
  border-left-color: #97c5e0;
  transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />

<div id="menu">

  <div id="mainicons" onmouseover="hoverIcons('mainicons')" onmouseout="nothoverIcons('mainicons')">
    <a href="/" title="Home"><i class="fa fa-home"></i></a>
    <a href="/ask" title="Ask"><i class="fa fa-envelope"></i></a>
    <a href="/submit" title="Request"><i class="fa fa-pencil "></i></a>
    <a href="/archive" title="Archive"><i class="fa fa-clock-o"></i></a>
  </div>
</div>

 #mainicons a{ /* select here the links */
  transition: color 0.25s;
  box-sizing: border-box;
  display:inline-block;
  position:relative ;
  margin:0 25px;
  padding: 10px 20px;
  box-sizing:content-box;

  &::before,
  &::after {
    content: '';
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    }

  &::before,
  &::after {
    border: 2px solid transparent;
    width: 0;
    height: 0;
    }

  &::before {
    top: 0;
    left: 0;
  }

  &::after {
    bottom: 0;
    right: 0;
  }

  &:hover {
    color: #97c5e0;
  }

  &:hover::before,
  &:hover::after {
    width: 100%;
    height: 100%;
  }

  &:hover::before {
    border-top-color: #97c5e0; 
    border-right-color: #97c5e0;
    transition:
      width 0.25s ease-out, 
      height 0.25s ease-out 0.25s; 
  }

  &:hover::after {
    border-bottom-color: #97c5e0;
    border-left-color: #97c5e0;
    transition:
      border-color 0s ease-out 0.5s,
      width 0.25s ease-out 0.5s,
      height 0.25s ease-out 0.75s; 
  }
}

Upvotes: 1

Rachel Gallen
Rachel Gallen

Reputation: 28553

your html seems funny - you have html for a center button and yet none appears??

you can use just 'purple' or 'blue' etc.. for colors if you don't want to use html codes/id you find it easier, you don't need to define these in your css - that dollar sign is usually used in jquery - i haven't seen it used in css before but that's just me, i won't say it can't be used [or i'd stand to be corrected]. EDIT: CSS vars are still experimental technology with no support in Chrome or IE (although supported in edge).. as there's no support in Chrome, I'd hold off using it for now

I adjusted your code somewhat. I added a display:block to the button code so now they display one under the other in the window. Remove this and they will display as the layout will display in your original code. For purposes of snippet/jsfiddle window it's just handier. I replaced the colours with the html colors that you had in your definitions but like i say, in future you can just say border-color:red etc.

Note that this is only meant as a guide. Adjust as you see fit!

button {
  display: block;
  background: none;
  border: 0;
  box-sizing: border-box;
  margin: 1em;
  padding: 1em 2em;
  box-shadow: inset 0 0 0 2px #f45e61;
  color: #f45e61;
  font-size: inherit;
  font-weight: 700;
  position: relative;
  vertical-align: middle;
  &::before,
  &::after {
    box-sizing: inherit;
    content: '';
    position: relative;
    width: 100%;
    height: 100%;
  }
}


.draw {
  transition: color 0.25s;
  border: 2px solid transparent;
  height: 100%;
}

.draw::after {
  bottom: 0;
  right: 0;
}

.draw:hover {
  color: #60daaa;
  border-color: #fbca67;
  width: 100%;
}

.meet {
  border-top-color: #fbca67;
  border-right-color: #fbca67;
}
.meet::after {
  top: 0;
  left: 0;
}

.meet:hover {
  color: #fbca67;
  z-index: 1;
  border-bottom-color: #fbca67!important;
  border-left-color: #fbca67!important;
}



.center {
  width: 200px;
  height: 100px;
  text-align: center;
  padding: 10px;
  border-style: solid;
   border-top-width: 2px!important;
  border-bottom-width: 2px!important;
  border-color: #6477b9;
  color: #6477b9;
}

.center:hover {
  color: #FF0000;
  border-left-width: 2px!important;
  border-right-width: 2px!important;
  z-index: 90!important;
}

.center:focus {
  border: 3px dashed red;
  color: forestgreen;
}

.spin {
  width: 5em;
  height: 5em;
  padding: 0;
  border-width: 2px;
  border-style: solid;
  border-color: transparent;
  top: 0;
  left: 0;
}

.circle {
  border-radius: 100%;
  box-shadow: none;
}

.thick {
  color: #f45e61;
  z-index: -1;
  background: #ffffff;
  border-color: #f45e61;
}

.thick:hover {
  color: #fff;
  font-weight: 700;
  background: #f45e61;
}

.thick::after {
  mix-blend-mode: color-dodge;
}


/* Page styling */

html {
  background: #4b507a;
}

body {
  background: #fefefe;
  color: #4b507a;
  font: 300 24px/1.5 Lato, sans-serif;
  margin: 1em auto;
  max-width: 36em;
  padding: 1em 1em 2em;
  text-align: center;
}

.buttons {
  isolation: isolate;
}

h1 {
  font-weight: 300;
  font-size: 2.5em;
}
<!---<h1>CSS Border Transitions</1>-->

<section class="buttons">
  <button class="draw">Draw</button>

  <button class="draw meet">Draw Meet</button>

  <button class="center">Center</button>

  <button class="spin">Spin</button>

  <button class="spin circle">Spin Circle</button>

  <button class="spin thick">Spin Thick</button>
</section>

Fiddle here

Upvotes: 1

Related Questions