5+ CSS Submit Button Examples

This post contains a total of 5+ Hand-Picked CSS Submit Button Examples with Source Code. All the Submit Buttons are made using CSS.

You can use the source code of these examples for educational purpose with credits to the original owner.

Related Posts

Click a Code to Copy it.

1. By Tiago Alexandre Lopes

Made by Tiago Alexandre Lopes. CSS Submit button with arrow animation. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title> 
<style>
button{
  padding: 15px 40px;
  background: #000;
  border:0;
  color: #fff;
  text-transform: uppercase;
  font-family: helvetica;
  font-size: 12px;
  letter-spacing: 3px;
  position: relative;
  transition:         all .4s cubic-bezier(0.645, 0.045, 0.355, 1);
  cursor: pointer;
  display: block;
  margin: 100px auto;
}

button::after,
button::before{
  content: "";
  position: absolute;
  top: 50%;
  right: 0px;
  transform: translateY(-50%);
    opacity: 0;
  transition:         all .4s cubic-bezier(0.645, 0.045, 0.355, 1);
}

button::after{
    width: 30px;
    height: 1px;
    background: white;
    transform: translateX(-3px);
    margin-top: 0px;
}

button::before{
    content: "";
    transform: rotate(-135deg) translateX(50%);
    width: 11px;
    height: 11px;
    background: transparent;
    border-left: 1px solid white;
    border-bottom: 1px solid white;
  margin-top: -1px;
}


button:hover{
  padding: 15px 60px 15px 20px;
}

button:hover::after,
button:hover::before{
  opacity: 1;
  right: 15px;
}
</style>
</head>
<body>
  <button>Submit form</button>
</body>
</html>

2. By Tixie

Made by Tixie. Submit button with send animation. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
body{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 2.4em;
  margin-top: -3.7em;
  margin-left: -180px;
  text-align: center;
}
input[type=submit]{
  margin-left: 0.5em;
  height: 2.5em;
  padding: 0.2em 1em 0.2em 2.25em;
  font-size: 3em;
  font-weight: bold;
  font-family: "Open Sans";
  text-transform: uppercase;
  color: #696666;
  background: url(https://i.imgur.com/Th606mh.png) no-repeat scroll 0.75em 0.07em transparent;
  background-size: 54px 204px;
  border-radius: 2em;
  border: 0.15em solid #F9C23C;
  cursor: pointer;
  transition: all 0.3s ease 0s;
}
input[type="submit"]:hover {
    color: #fff;
    background-color: #EAA502;
    border-color: #EAA502;
    background-position: 0.75em bottom;
    -webkit-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
input[type="submit"]:focus {
    background-position: 2em -4em;
    -webkit-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
/* Webfonts */

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://themes.googleusercontent.com/static/fonts/opensans/v8/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
</style>
</head>
<body>
  <form>
  <input value="Send" type="submit" />
</form>
</body>
</html>

3. By Sebastian

Made by Sebastian. Submit button with hover up effect. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href='https://fonts.googleapis.com/css?family=Roboto:400,500' rel='stylesheet' type='text/css'>

<style>
html, body {
  height: 100%;
}

.wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button {
  width: 140px;
  height: 45px;
  font-family: 'Roboto', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-weight: 500;
  color: #000;
  background-color: #fff;
  border: none;
  border-radius: 45px;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease 0s;
  cursor: pointer;
  outline: none;
  }

.button:hover {
  background-color: #2EE59D;
  box-shadow: 0px 15px 20px rgba(46, 229, 157, 0.4);
  color: #fff;
  transform: translateY(-7px);
}
</style>
</head>
<body>
  <div class="wrap">
  <button class="button">Submit</button>
</div>
</body>
</html>

4. By Pawel

Made by Pawel. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<style>
* {
  margin: 0;
  padding: 0;
}

.subscribe {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 400px;
  
}

input:focus {
  outline: 0;
}

a {
  text-decoration: none;
}

ul {
  list-style: none;
}

input[type="submit"]{
  display: block;
  margin: 0 auto;
  width: 50%;
  height: 50px;
  font-family: Helvetica;
  border-bottom: 5px solid steelblue;
  border-top: none;
  border-left: none;
  border-right: none;
  background: linear-gradient(#5FDDFF,#53ADDF);
  color: white;
  border-radius: 10px;
  box-shadow: 0px 2px 10px grey;
  transition: 150ms ease;
  font-weight: bold;
}

input[type="submit"]:active{
  border: none;
  border-bottom: 2px solid steelblue;
  box-shadow: 0px 1px 5px grey;
  background: linear-gradient(#53AFFF,#5FCDFF);
  color: #FFF;
}

.btn-3d-sub {
  display: block;
  margin: 0 auto;
  width: 50%;
  height: 50px;
  font-family: Helvetica;
  border-bottom: 5px solid #173814;
  border-top: none;
  border-left: none;
  border-right: none;
  background: linear-gradient(#469e3f,#255b20);
  color: white;
  border-radius: 10px;
  box-shadow: 0px 2px 10px grey;
  transition: 150ms ease;
  text-align: center;
  line-height: 50px;
  font-weight: bold;
}

.btn-3d-sub:active {
  border: none;
  border-bottom: 2px solid steelblue;
  box-shadow: 0px 1px 5px grey;
  background: linear-gradient(#255b20,#469e3f);
  color: #FFF;
}

.btn-3d-can {
  display: block;
  margin: 0 auto;
  width: 50%;
  height: 50px;
  font-family: Helvetica;
  border-bottom: 5px solid #2d0707;
  border-top: none;
  border-left: none;
  border-right: none;
  background: linear-gradient(#991b1b,#490e0e);
  color: white;
  border-radius: 10px;
  box-shadow: 0px 2px 10px grey;
  transition: 150ms ease;
  text-align: center;
  line-height: 50px;
  font-weight: bold;
}

.btn-3d-can:active {
  border: none;
  border-bottom: 2px solid #490e0e;
  box-shadow: 0px 1px 5px grey;
  background: linear-gradient(#490e0e,#991b1b);
  color: #FFF;
}
</style>
</head>
<body>
  <div class="subscribe">
    <input type="submit" class="btn" value="sign in" style="font-size: 16px"><br />
    <a href="#" class="btn-3d-sub"><span>submit</span></a><br />
    <a href="#" class="btn-3d-can"><span>cancel</span></a>
</div>
</body>
</html>

5. By LittleSnippets

Made by LittleSnippets. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://www.littlesnippets.net/css/codepen-result.css'>
  
<style>
@import url(https://fonts.googleapis.com/css?family=BenchNine:700);
.snip1582 {
  background-color: #c47135;
  border: none;
  color: #ffffff;
  cursor: pointer;
  display: inline-block;
  font-family: 'BenchNine', Arial, sans-serif;
  font-size: 1em;
  font-size: 22px;
  line-height: 1em;
  margin: 15px 40px;
  outline: none;
  padding: 12px 40px 10px;
  position: relative;
  text-transform: uppercase;
  font-weight: 700;
}

.snip1582:before,
.snip1582:after {
  border-color: transparent;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
  border-style: solid;
  border-width: 0;
  content: "";
  height: 24px;
  position: absolute;
  width: 24px;
}

.snip1582:before {
  border-color: #c47135;
  border-top-width: 2px;
  left: 0px;
  top: -5px;
}

.snip1582:after {
  border-bottom-width: 2px;
  border-color: #c47135;
  bottom: -5px;
  right: 0px;
}

.snip1582:hover,
.snip1582.hover {
  background-color: #c47135;
}

.snip1582:hover:before,
.snip1582.hover:before,
.snip1582:hover:after,
.snip1582.hover:after {
  height: 100%;
  width: 100%;
}
</style>
</head>
<body>
  <button class="snip1582">Submit</button>
</body>
</html>

6. By LittleSnippets

Another CSS Submit button by LittleSnippets. ( Source )

<!DOCTYPE html>
<html lang='en' class=''>
<head>
  <meta charset='UTF-8'>
  <title></title>
  <link rel="stylesheet" href="https://www.littlesnippets.net/css/codepen-result.css">

  <style class="INLINE_PEN_STYLESHEET_ID">
    @import url(https://fonts.googleapis.com/css?family=Raleway:400);
.snip1479 {
  font-family: 'Raleway', Arial, sans-serif;
  border: none;
  background-color: #5666a5;
  border-radius: 5px;
  color: #ffffff;
  cursor: pointer;
  padding: 0px 30px;
  display: inline-block;
  margin: 15px 30px;
  text-transform: uppercase;
  line-height: 46px;
  font-weight: 400;
  font-size: 1em;
  outline: none;
  position: relative;
  overflow: hidden;
  font-size: 16px;
  border-radius: 23px;
  letter-spacing: 2px;
  -webkit-transform: translateZ(0);
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.snip1479:before {
  opacity: 0;
  content: "";
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  border-radius: inherit;
  background-color: #ffffff;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}
.snip1479:after {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  border: 5px solid #5666a5;
  content: '';
  border-radius: inherit;
}
.snip1479:hover,
.snip1479.hover {
  background-color: #5666a5;
  color: #ffffff;
}
.snip1479:hover:before,
.snip1479.hover:before {
  -webkit-transform: translateY(0%);
  transform: translateY(0%);
  opacity: 0.25;
}
  </style>
</head>
<body>
  <button class="snip1479">Submit</button>
</body>
</html>