Fostrap

1. Buttons Hover with SVG

The HTML

<a class="btnfos btnfos-1" href="https://www.blogger.com/null">
   <svg>
      <rect fill="none" height="100%" width="100%" x="0" y="0">
   </rect></svg>
     Hover
</a> 

The CSS

* {
  -moz-box-sizing: inherit;
       box-sizing: inherit;
  -webkit-transition-property: all;
          transition-property: all;
  -webkit-transition-duration: .6s;
          transition-duration: .6s;
  -webkit-transition-timing-function: ease;
          transition-timing-function: ease;
}
html,
body {
  -moz-box-sizing: border-box;
       box-sizing: border-box;
  height: 100%;
  width: 100%;
}
body {
  background: #3498db; 
}
.btnfos {
  color: #fff;
  cursor: pointer;
  display: block;
  font-size: 16px;
  font-weight: 400;
  line-height: 45px;
  max-width: 160px;
  margin: 0 auto 2em;
  position: relative;
  text-transform: uppercase;
  vertical-align: middle;
  width: 100%;
  text-align: center;
}
@media (min-width: 400px) {
  .btnfos {
    display: inline-block;
    margin-right: 2.5em;
  }
  .btnfos:nth-of-type(even) {
    margin-right: 0;
  }
}
@media (min-width: 600px) {
  .btnfos:nth-of-type(even) {
    margin-right: 2.5em;
  }
  .btnfos:nth-of-type(5) {
    margin-right: 0;
  }
}
.btnfos-1 {
  background: #3498db;
  font-weight: 100;
}
.btnfos-1 svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 45px;
}
.btnfos-1 rect {
  fill: none;
  stroke: #fff;
  stroke-width: 1;
  stroke-dasharray: 422, 0;
}
.btnfos-1:hover {
  background: rgba(225, 51, 45, 0);
  letter-spacing: 1px;
  font-weight: 900;
}
.btnfos-1:hover rect {
  stroke-width: 5;
  stroke-dasharray: 15, 310;
  stroke-dashoffset: 48;
  -webkit-transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
          transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
}

2. Button Action CSS 3

The HTML

<a class="btnfos btnfos-2" href="">Hover</a>

  The CSS

* {
  -moz-box-sizing: inherit;
       box-sizing: inherit;
  -webkit-transition-property: all;
          transition-property: all;
  -webkit-transition-duration: .6s;
          transition-duration: .6s;
  -webkit-transition-timing-function: ease;
          transition-timing-function: ease;
}
html,
body {
  -moz-box-sizing: border-box;
       box-sizing: border-box;
  height: 100%;
  width: 100%;
}
body {
  background: #3498db; 
}
.btnfos {
  color: #fff;
  cursor: pointer;
  display: block;
  font-size: 16px;
  font-weight: 400;
  line-height: 45px;
  max-width: 160px;
  margin: 0 auto 2em;
  position: relative;
  text-transform: uppercase;
  vertical-align: middle;
  width: 100%;
  text-align: center;
}
@media (min-width: 400px) {
  .btnfos {
    display: inline-block;
    margin-right: 2.5em;
  }
  .btnfos:nth-of-type(even) {
    margin-right: 0;
  }
}
@media (min-width: 600px) {
  .btnfos:nth-of-type(even) {
    margin-right: 2.5em;
  }
  .btnfos:nth-of-type(5) {
    margin-right: 0;
  }
}
.btnfos-2 {
  letter-spacing: 0;
}
.btnfos-2:hover,
.btnfos-2:active {
  letter-spacing: 5px;
}
.btnfos-2:after,
.btnfos-2:before {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  border: 1px solid rgba(255, 255, 255, 0);
  bottom: 0px;
  content: " ";
  display: block;
  margin: 0 auto;
  position: relative;
  -webkit-transition: all 280ms ease-in-out;
          transition: all 280ms ease-in-out;
  width: 0;
}
.btnfos-2:hover:after,
.btnfos-2:hover:before {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  border-color: #fff;
  -webkit-transition: width 350ms ease-in-out;
          transition: width 350ms ease-in-out;
  width: 70%;
}
.btnfos-2:hover:before {
  bottom: auto;
  top: 0;
  width: 70%;
}

3. Style With Shadow

The HTML

<a class="btnfos btnfos-3" href="">Hover</a>

The CSS

* {
  -moz-box-sizing: inherit;
       box-sizing: inherit;
  -webkit-transition-property: all;
          transition-property: all;
  -webkit-transition-duration: .6s;
          transition-duration: .6s;
  -webkit-transition-timing-function: ease;
          transition-timing-function: ease;
}
html,
body {
  -moz-box-sizing: border-box;
       box-sizing: border-box;
  height: 100%;
  width: 100%;
}
body {
  background: #3498db; 
}
.btnfos {
  color: #fff;
  cursor: pointer;
  display: block;
  font-size: 16px;
  font-weight: 400;
  line-height: 45px;
  max-width: 160px;
  margin: 0 auto 2em;
  position: relative;
  text-transform: uppercase;
  vertical-align: middle;
  width: 100%;
  text-align: center;
}
@media (min-width: 400px) {
  .btnfos {
    display: inline-block;
    margin-right: 2.5em;
  }
  .btnfos:nth-of-type(even) {
    margin-right: 0;
  }
}
@media (min-width: 600px) {
  .btnfos:nth-of-type(even) {
    margin-right: 2.5em;
  }
  .btnfos:nth-of-type(5) {
    margin-right: 0;
  }
}
.btnfos-3 {
  background: #3498db;
  border: 1px solid white;
  box-shadow: 0px 2px 0 white, 2px 4px 6px #eee;
  font-weight: 900;
  letter-spacing: 1px;
  -webkit-transition: all 150ms linear;
          transition: all 150ms linear;
}
.btnfos-3:hover {
  background: #3498db;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2);
  color: #74e6e0;
  text-decoration: none;
  text-shadow: -1px -1px 0 #136a65;
  -webkit-transition: all 250ms linear;
          transition: all 250ms linear;
}

4. This is Very Awesome

The HTML

<a class="btnfos btnfos-4" href="">Hover</a>

The CSS

* {
  -moz-box-sizing: inherit;
       box-sizing: inherit;
  -webkit-transition-property: all;
          transition-property: all;
  -webkit-transition-duration: .6s;
          transition-duration: .6s;
  -webkit-transition-timing-function: ease;
          transition-timing-function: ease;
}
html,
body {
  -moz-box-sizing: border-box;
       box-sizing: border-box;
  height: 100%;
  width: 100%;
}
body {
  background: #3498db; 
}
.btnfos {
  color: #fff;
  cursor: pointer;
  display: block;
  font-size: 16px;
  font-weight: 400;
  line-height: 45px;
  max-width: 160px;
  margin: 0 auto 2em;
  position: relative;
  text-transform: uppercase;
  vertical-align: middle;
  width: 100%;
  text-align: center;
}
@media (min-width: 400px) {
  .btnfos {
    display: inline-block;
    margin-right: 2.5em;
  }
  .btnfos:nth-of-type(even) {
    margin-right: 0;
  }
}
@media (min-width: 600px) {
  .btnfos:nth-of-type(even) {
    margin-right: 2.5em;
  }
  .btnfos:nth-of-type(5) {
    margin-right: 0;
  }
}
.btnfos-4 {
  border: 1px solid;
  overflow: hidden;
  position: relative;
}
.btnfos-4 span {
  z-index: 20;
}
.btnfos-4:after {
  background: #fff;
  content: "";
  height: 155px;
  left: -75px;
  opacity: .2;
  position: absolute;
  top: -50px;
  width: 50px;
  -webkit-transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
          transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
  -webkit-transform: rotate(35deg);
      -ms-transform: rotate(35deg);
          transform: rotate(35deg);
  z-index: -10;
}
.btnfos-4:hover:after {
  left: 120%;
  -webkit-transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
          transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
}

5. Hover In Out !

The HTML

<a class="btnfos btnfos-2" href="">Hover</a>

The CSS

* {
  -moz-box-sizing: inherit;
       box-sizing: inherit;
  -webkit-transition-property: all;
          transition-property: all;
  -webkit-transition-duration: .6s;
          transition-duration: .6s;
  -webkit-transition-timing-function: ease;
          transition-timing-function: ease;
}
html,
body {
  -moz-box-sizing: border-box;
       box-sizing: border-box;
  height: 100%;
  width: 100%;
}
body {
  background: #3498db; 
}
.btnfos {
  color: #fff;
  cursor: pointer;
  display: block;
  font-size: 16px;
  font-weight: 400;
  line-height: 45px;
  max-width: 160px;
  margin: 0 auto 2em;
  position: relative;
  text-transform: uppercase;
  vertical-align: middle;
  width: 100%;
  text-align: center;
}
@media (min-width: 400px) {
  .btnfos {
    display: inline-block;
    margin-right: 2.5em;
  }
  .btnfos:nth-of-type(even) {
    margin-right: 0;
  }
}
@media (min-width: 600px) {
  .btnfos:nth-of-type(even) {
    margin-right: 2.5em;
  }
  .btnfos:nth-of-type(5) {
    margin-right: 0;
  }
}
.btnfos-5 {
  border: 0 solid;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
  outline: 1px solid;
  outline-color: rgba(255, 255, 255, 0);
  outline-offset: 0px;
  text-shadow: none;
  -webkit-transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
          transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
  outline-color: rgba(255, 255, 255, 0.5);
  outline-offset: 0px;
}
.btnfos-5:hover {
  border: 1px solid;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.2);
  outline-offset: 15px;
  outline-color: rgba(255, 255, 255, 0);
  text-shadow: 1px 1px 2px #427388;
}

Diposkan oleh Unknown

Web design is highly developed so fast, I can't imagine what else will come in 2017, in 2016 is very much the trend of web design that is very popular with its beauty, namely minimalist web design, minimalist web design includes layout, button, navbar, sidebar, colors, typography and more. Many are comfortable with minimalist web design because web design minimalist, very unsightly by eyes, and because of the minimalist design is very simple and not too complicated, minimalist web design is often referred to as the style of material design and flat design. This is Creative CSS Button Style Tutorial by Fostrap

Creative CSS Button Style

1. Primary Button

<a href="#" class="action-button shadow animate blue">Submit</a>

CSS

.animate
{
transition: all 0.1s;
-webkit-transition: all 0.1s;
}
.action-button
{
position: relative;
padding: 10px 40px;
        margin: 0px 10px 10px 0px;
border-radius: 3px;
font-family: 'Lato', sans-serif;
font-size: 18px;
color: #FFF;
text-decoration: none; }
.blue
{
background-color: #3498db;
border-bottom: 5px solid #2980B9;
text-shadow: 0px -2px #2980B9;
}
.action-button:active
{
transform: translate(0px,5px);
  -webkit-transform: translate(0px,5px);
border-bottom: 1px solid;
}

Demo : Submit

2. Danger Button

<a href="#" class="action-button shadow animate red">Submit</a>

3. Success Button

<a href="#" class="action-button shadow animate green">Submit</a>

4. Warning Button

<a href="#" class="action-button shadow animate yellow">Submit</a>

Diposkan oleh Unknown