CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
sidosq
sidosq

Reputation: 19

Bootstrap button with hover animation

I am looking for solution for coding this design element.

http://prntscr.com/g3t4zm

My main problem is the first buttons design and the animation on hover.

How to make thin line around, how to make another circle around when hover?

Any idea?

Thanks.

Right now it looks like this:

.inner-addon {
  position: relative;
}


/* style glyph */

.inner-addon .glyphicon {
  position: absolute;
  padding: 5px;
  pointer-events: none;
}


/* add padding  */

.left-addon input {
  padding-left: 30px;
}

.btn-round-lg {
  border: 5px solid;
  border-radius: 26px;
}

.btn-round-xs {
  border-radius: 26px;
  padding-left: 10px;
  padding-right: 10px;
  border: 5px solid;
}

.inp {
  border: 0;
  outline: 0;
  background: transparent;
  border-bottom: 1px solid black;
}
<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <!--<div class="col-lg-2 col-lg-offset-2"><a href="#" class="btn btn-default btn-round-lg">Default</a></div>-->
      <div class="col-lg-2 col-lg-offset-2"><a href="#" class="btn btn-success btn-round-lg">Success</a></div>
      <div class="col-lg-2"><a href="#" class="btn btn-info btn-round-lg">Info</a></div>
      <div class="col-lg-2"><a href="#" class="btn btn-warning btn-round-lg">Warning</a></div>
      <div class="col-lg-2"><a href="#" class="btn btn-danger btn-round-lg">Danger</a></div>
    </div>
    <div class="col-lg-12">
      <!--<div class="col-lg-2 col-lg-offset-2"><a href="#" class="btn btn-default btn-xs btn-round-xs">Default</a>-->
      <!--</div>-->
      <div class="col-lg-2 col-lg-offset-2"><a href="#" class="btn btn-success btn-xs btn-round-xs">Success</a>
      </div>
      <div class="col-lg-2"><a href="#" class="btn btn-info btn-xs btn-round-xs">Info</a></div>
      <div class="col-lg-2"><a href="#" class="btn btn-warning btn-xs btn-round-xs">Warning</a></div>
      <div class="col-lg-2"><a href="#" class="btn btn-danger btn-xs btn-round-xs">Danger</a></div>
    </div>
  </div>
</div>

Upvotes: 0

Views: 15061

Answers (7)

James Douglas
James Douglas

Reputation: 3446

You can add a invisible border around the button and replace it with a blue border on :hover, and to make it smooth use transition like this:

.button {
  padding: 4px 10px;
  display: inline-block;
  border-radius: 50px;
  background-color: #00B1FF;
  color: white;
  border: 5px solid white;
  transition: border 0.2s ease;
}
.button:hover {
  border: 5px solid #81D9FF;
  cursor: pointer;
}
<div class="button">Button</div>

And as for the other button, 

.button {
  padding: 4px 10px;
  display: inline-block;
  border-radius: 50px;
  color: blue;
  border: 2px solid blue;
  cursor: pointer;
}
.button:hover {
  box-shadow : 0px 0px 0px 5px #00B1FF;
}
<div class="button">Button</div>

Upvotes: 2

Sangrai
Sangrai

Reputation: 687

One example here:

HTML:

<a href="#" class="btn btn-warning btn-round-lg">Warning</a>

CSS: 

.btn-round-lg {
  background: #00b1ff none repeat scroll 0 0;
  border:8px solid #fff;
  border-radius: 37px;
  color: #fff;
  font-weight: 600;
  letter-spacing: 3px;
  min-width: 186px;
  padding: 15px 20px;
  position: relative;
  text-transform: uppercase;
  transition:all 0.25s ease 0s;
  text-decoration:none;
  font-family:arial;
}
.btn-round-lg:hover {
  border: 8px solid rgba(129, 217, 255, 0.9);
  color: #fff;
}

Upvotes: 1

Happysmithers
Happysmithers

Reputation: 761

Would these help?

Animation with css :hover attribute.

Design of rounded corners with border-radius. I realize you already have them in your example, but you were asking about how to create this design in the original question...

div{
  margin: 2em;
}

.mybutton{
  border: 3px solid blue; 
  margin: 3em;
  border-radius: 10px;
  padding: 10px;
  background-color: lightblue;
}

.mybutton:hover{
  border: 5px solid red;
}
<div>
  <span class="mybutton">Click me</span>
</div>
<div>
  <span class="mybutton">Click me</span>
</div>
<div>
  <span class="mybutton">Click me</span>
</div>

Upvotes: -1

Rafiqul Islam
Rafiqul Islam

Reputation: 961

You need Bootstrap.min.css file

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<style>
.inner-addon {
  position: relative;
}


/* style glyph */

.inner-addon .glyphicon {
  position: absolute;
  padding: 5px;
  pointer-events: none;
}


/* add padding  */

.left-addon input {
  padding-left: 30px;
}

.btn-round-lg {
  border: 5px solid;
  border-radius: 26px;
}

.btn-round-xs {
  border-radius: 26px;
  padding-left: 10px;
  padding-right: 10px;
  border: 5px solid;
}

.inp {
  border: 0;
  outline: 0;
  background: transparent;
  </style>
</head>

<body>
	  <div class="container">
  <div class="row">
    <div class="col-lg-12">
      <!--<div class="col-lg-2 col-lg-offset-2"><a href="#" class="btn btn-default btn-round-lg">Default</a></div>-->
      <div class="col-lg-2 col-lg-offset-2"><a href="#" class="btn btn-success btn-round-lg">Success</a></div>
      <div class="col-lg-2"><a href="#" class="btn btn-info btn-round-lg">Info</a></div>
      <div class="col-lg-2"><a href="#" class="btn btn-warning btn-round-lg">Warning</a></div>
      <div class="col-lg-2"><a href="#" class="btn btn-danger btn-round-lg">Danger</a></div>
    </div>
    <div class="col-lg-12">
      <!--<div class="col-lg-2 col-lg-offset-2"><a href="#" class="btn btn-default btn-xs btn-round-xs">Default</a>-->
      <!--</div>-->
      <div class="col-lg-2 col-lg-offset-2"><a href="#" class="btn btn-success btn-xs btn-round-xs">Success</a>
      </div>
      <div class="col-lg-2"><a href="#" class="btn btn-info btn-xs btn-round-xs">Info</a></div>
      <div class="col-lg-2"><a href="#" class="btn btn-warning btn-xs btn-round-xs">Warning</a></div>
      <div class="col-lg-2"><a href="#" class="btn btn-danger btn-xs btn-round-xs">Danger</a></div>
    </div>
  </div>
</div>
</body>
</html>

Upvotes: 0

vishnu
vishnu

Reputation: 2948

See this:

.btn {
  display: inline-block;
  padding: 10px 40px;
  background: #00b1ff;
  border-radius: 25px;
  color: #fff;
  border: 6px solid #fff;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.btn:hover {
  border: 6px solid #81d9ff;
}
<div class="btn">
  BUTTON
</div>

Upvotes: 1

Gerard
Gerard

Reputation: 15786

.btn {
border-radius: 25px !important;
box-sizing: border-box;
border: 10px solid transparent !important;
}

.btn:hover {
border: 10px solid blue !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-2"><a href="#" class="btn btn-danger btn-xl btn-round-xl">Danger</a></div>

Upvotes: -1

Louis &#39;LYRO&#39; Dupont
Louis &#39;LYRO&#39; Dupont

Reputation: 1112

To do the effect you are searching for, a way to do it is using box-shadow in CSS :

.col-lg-2 {
  width : 150px;
  height : 50px;
  text-align : center;
  color : white;
  background-color : #aaaaaa;
  border-radius : 25px;
  transition : 0.3s;
}

.col-lg-2 a {
  color : white;
  font-family : Arial;
  font-size : 22px;
  text-align : center;
  text-transform : uppercase;
  text-decoration : none;
  line-height : 50px;
}

.col-lg-2:hover {
  transition : 0.3s;
  box-shadow : 0px 0px 1px 8px #aaaaaa;
  background-color : #828282;
  cursor : pointer;
}
<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <div class="col-lg-2"><a href="#" class="btn btn-info btn-round-lg">Info</a></div>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions