Vintage style css button

70s CSS Button. A nice little css button developed using CSS and html. demo and download available.

Demo Download

Author Jordan Halvorsen
Hits
Created JANUARY 27, 2017
License Open
Compatible browsers Chrome, Firefox, Safari

HTML Snippet

<b>Funky Button <br><span>for your viewing pleasure</span></b>

<section id="intro">

  <div id="intro-content" class="center-content">

    <div class="center-content-inner">

      <div class="content-section content-section-margin">

        <div class="content-section-grid clearfix">
        
        <a href="#" class="button nav-link">

          <div class="bottom"></div>

          <div class="top">

          <div class="label">Go Retro Baby</div>
            
        		<div class="button-border button-border-left"></div>
        	  <div class="button-border button-border-top"></div>
        	  <div class="button-border button-border-right"></div>
        		<div class="button-border button-border-bottom"></div>

          </div>

        	</a>

        </div>

       </div>

      </div>

     </div>

  </section>

CSS Code

html {
    border: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

*,*:before,*:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

body {
    background-color: #fff;
    padding: 0;
    margin: 0;
    height: auto;
    width: 100%;
}

b {
  position: relative;
  display: block;
  font-family: helvetica neue, helvetica, sans-serif;
  line-height: 1.15em;
  margin-top: -1.15em;
  top: 2.3em;
  font-size: 0.67em;
  font-weight: 400;
  letter-spacing: 0.025em;
  opacity: 0.75;
  text-align: center;
}

b span {
  font-size: 0.785em;
  font-weight: 400;
  opacity: 0.4;
}

#intro {
  width: 200px;
  margin: 100px auto 0;
}

.button {
    display: inline-block;
    text-decoration: none;
    position: relative;
    margin-top: 40px;
}

.button .bottom {
    position: absolute;
    left: 7px;
    top: 7px;
    width: 100%;
    height: 100%;
    background-color: #2acdc1;
    display: block;
    -webkit-transition: all .15s ease-out;
    -moz-transition: all .15s ease-out;
    -o-transition: all .15s ease-out;
    transition: all .15s ease-out;
}

.button .top {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 24px 34px 22px 34px;
    border: 2px solid #04049d;
}

.button-dark .top {
    border: 2px solid #fff;
}

.button .top .label {
    font-family: sans-serif;
    font-weight: 600;
    color: #04049d;
    font-size: 12px;
    line-height: 110%;
    letter-spacing: 2px;
    text-align: center;
    text-transform: uppercase;
    -webkit-transition: all .15s ease-out;
    -moz-transition: all .15s ease-out;
    -o-transition: all .15s ease-out;
    transition: all .15s ease-out;
}

.button-dark .top .label {
    color: #fff;
}

.button:hover .bottom {
    left: 0;
    top: 0;
    background-color: #f3f3f3;
}

.button:hover .top .label {
    color: #2acdc1;
}

.button-border {
    position: absolute;
    background-color: #2acdc1;
    -webkit-transition: all .25s ease-out;
    -moz-transition: all .25s ease-out;
    -o-transition: all .25s ease-out;
    transition: all .25s ease-out;
}

.button:hover .top .button-border-left,.button:hover .top .button-border-right {
    height: calc(100% + 2px);
}

.button:hover .top .button-border-top,.button:hover .top .button-border-bottom {
    width: calc(100% + 2px);
}

.button-border-left {
    left: -2px;
    bottom: -2px;
    width: 2px;
    height: 0;
}

.button-border-top {
    left: -2px;
    top: -2px;
    width: 0;
    height: 2px;
}

.button-border-right {
    right: -2px;
    top: -2px;
    width: 2px;
    height: 0;
}

.button-border-bottom {
    right: -2px;
    bottom: -2px;
    width: 0;
    height: 2px;
}

Preview

Vintage style css button preview

Advertisement

Google Matched Content...