Buttons

Buttons CSS You Guys Can Steal

```
        .btn-grad {background-image: linear-gradient(to right, #2b5876 0%, #4e4376  51%, #2b5876  100%)}
        .btn-grad {
           margin: 10px;
           padding: 15px 45px;
           text-align: center;
           text-transform: uppercase;
           transition: 0.5s;
           background-size: 200% auto;
           color: white;
           box-shadow: 0 0 20px #eee;
           border-radius: 10px;
           display: block;
         }

```

```
         .btn-grad:hover {
           background-position: right center; /* change the direction of the change here */
           color: #fff;
           text-decoration: none;
         }

```

```
        .btn-grad {background-image: linear-gradient(to right, #1FA2FF 0%, #12D8FA  51%, #1FA2FF  100%)}
        .btn-grad {
           margin: 10px;
           padding: 15px 45px;
           text-align: center;
           text-transform: uppercase;
           transition: 0.5s;
           background-size: 200% auto;
           color: white;
           box-shadow: 0 0 20px #eee;
           border-radius: 10px;
           display: block;
         }

```

```
         .btn-grad:hover {
           background-position: right center; /* change the direction of the change here */
           color: #fff;
           text-decoration: none;
         }

```

```
        .btn-grad {background-image: linear-gradient(to right, #1D2B64 0%, #F8CDDA  51%, #1D2B64  100%)}
        .btn-grad {
           margin: 10px;
           padding: 15px 45px;
           text-align: center;
           text-transform: uppercase;
           transition: 0.5s;
           background-size: 200% auto;
           color: white;
           box-shadow: 0 0 20px #eee;
           border-radius: 10px;
           display: block;
         }

```

```
         .btn-grad:hover {
           background-position: right center; /* change the direction of the change here */
           color: #fff;
           text-decoration: none;
         }

```

```
        .btn-grad {background-image: linear-gradient(to right, #F09819 0%, #EDDE5D  51%, #F09819  100%)}
        .btn-grad {
           margin: 10px;
           padding: 15px 45px;
           text-align: center;
           text-transform: uppercase;
           transition: 0.5s;
           background-size: 200% auto;
           color: white;
           box-shadow: 0 0 20px #eee;
           border-radius: 10px;
           display: block;
         }

```

```
         .btn-grad:hover {
           background-position: right center; /* change the direction of the change here */
           color: #fff;
           text-decoration: none;
         }

```

```
        .btn-grad {background-image: linear-gradient(to right, #ff6e7f 0%, #bfe9ff  51%, #ff6e7f  100%)}
        .btn-grad {
           margin: 10px;
           padding: 15px 45px;
           text-align: center;
           text-transform: uppercase;
           transition: 0.5s;
           background-size: 200% auto;
           color: white;
           box-shadow: 0 0 20px #eee;
           border-radius: 10px;
           display: block;
         }

```

```
         .btn-grad:hover {
           background-position: right center; /* change the direction of the change here */
           color: #fff;
           text-decoration: none;
         }

```