# Button Styles

### [Preview Link](https://app.growcrm.co/v2/preview/8qbf80JAexPEy9HnEL9Q?notrack=true)

### Button 1

```css
/* -- Squishy Hover Outline Button CSS -- */
.squishy-hover-outline-btn {
    background-color: #0071E3;
    color: white;
    padding: 14px 36px;
    font-size: 18px;
    border: 2px solid #0071E3;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, color 0.15s ease-in-out;
    font-weight: bold;
    user-select: none;
}

.squishy-hover-outline-btn:hover {
    transform: scale(0.95);
    background-color: transparent;
    color: #0071E3;
}
```

### Button 2

```css
/* -- Button CSS -- */
.ghlbtn {
    display: inline-block;
    padding: 0.75rem 1.25rem;
    border-radius: 10rem;
    color: #fff;
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: 0.15rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Background layer */
.ghlbtn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0071E3;
    border-radius: 10rem;
    z-index: -2;
}

/* Hover transition layer */
.ghlbtn::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background-color: #005bb6;
 /* darker version of #0071E3 */
    transition: all 0.3s ease;
    border-radius: 10rem;
    z-index: -1;
}

/* Hover effect */
.ghlbtn:hover::before {
    width: 100%;
}

.ghlbtn:hover {
    color: #fff;
}
```

### Button 3

```css
/* -- Button CSS -- */

.obutton {
    position: relative;
    z-index: 1;x
    overflow: hidden;
    border: none;
    border-radius: 5px;
    padding: 1rem 2rem;
    font-size: 20px;
    font-family: sans-serif;
    background-color: #0071E3;
 /* changed from purple */
    color: white;
    transition: all .7s ease-in-out;
}

.obutton:hover {
    color: #0071E3;
 /* changed from purple */
}

.obutton::before {
    position: absolute;
    display: inline-block;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 5px;
    width: 0;
    height: 100%;
    content: "";
    background-color: white;
    transition: all 700ms ease-in-out;
}

.obutton:hover::before {
    left: unset;
    right: 0;
    width: 100%;
    transform: rotate(180deg);
}
```

### Button 4

```css
/* -- Button CSS -- */

.shadow__btn {
    padding: 10px 20px;
    border: none;
    font-size: 17px;
    color: #fff;
    border-radius: 7px;
    letter-spacing: 4px;
    font-weight: 700;
    text-transform: uppercase;
    transition: 0.5s;
    transition-property: box-shadow;
}

.shadow__btn {
    background: rgb(0,140,255);
    box-shadow: 0 0 25px rgb(0,140,255);
}

.shadow__btn:hover {
    box-shadow: 0 0 5px rgb(0,140,255),
              0 0 25px rgb(0,140,255),
              0 0 50px rgb(0,140,255),
              0 0 100px rgb(0,140,255);
}
```

### Button 5

```css
/* -- Button CSS -- */

.fbutton {
    position: relative;
    font-size: 1.2em;
    padding: 0.7em 1.4em;
    background-color: #BF0426;
    text-decoration: none;
    border: none;
    border-radius: 0.5em;
    color: #DEDEDE;
    box-shadow: 0.5em 0.5em 0.5em rgba(0, 0, 0, 0.3);
}

.fbutton::before {
    position: absolute;
    content: '';
    height: 0;
    width: 0;
    top: 0;
    left: 0;
    background: linear-gradient(135deg, rgb(238, 238, 238) 0%, rgba(238, 238, 238) 50%, rgb(0, 113, 227) 50%, rgb(0, 75, 151) 60%);
    border-radius: 0 0 0.5em 0;
    box-shadow: 0.2em 0.2em 0.2em rgba(0, 0, 0, 0.3);
    transition: 0.3s;
}

.fbutton:hover::before {
    width: 1.6em;
    height: 1.6em;
}

.fbutton:active {
    box-shadow: 0.2em 0.2em 0.3em rgba(0, 0, 0, 0.3);
    transform: translate(0.1em, 0.1em);
}

```

### Button 6

```css
.sleek-glow-btn {
    position: relative;
    padding: 14px 36px;
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
    background-color: #0071E3;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    overflow: hidden;
    transition: background-color 0.3s ease;
}

.sleek-glow-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.3), transparent);
    transform: skewX(-20deg);
    transition: all 0.5s ease;
}

.sleek-glow-btn:hover::before {
    left: 125%;
}

.sleek-glow-btn span {
    position: relative;
    z-index: 1;
}
```

### Button 7

```css
/* -- Button CSS -- */

.xbtn:hover {
    animation: jello-horizontal 0.9s both;
}

@keyframes jello-horizontal {
    0% {
        transform: scale3d(1, 1, 1);
    }

    30% {
        transform: scale3d(1.25, 0.75, 1);
    }

    40% {
        transform: scale3d(0.75, 1.25, 1);
    }

    50% {
        transform: scale3d(1.15, 0.85, 1);
    }

    65% {
        transform: scale3d(0.95, 1.05, 1);
    }

    75% {
        transform: scale3d(1.05, 0.95, 1);
    }

    100% {
        transform: scale3d(1, 1, 1);
    }
}
```

### Button 8

```css
/* -- Button CSS -- */

.corner-fill-btn {
    position: relative;
    display: inline-block;
    padding: 14px 36px;
    font-size: 16px;
    color: #0071E3;
    background: transparent;
    border: 2px solid #0071E3;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: color 0.4s ease;
    z-index: 1;
}

.corner-fill-btn::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: 0;
    left: 0;
    background: #0071E3;
    transition: all 0.9s ease;
    z-index: -1;
}

.corner-fill-btn:hover::before {
    width: 100%;
    height: 100%;
}

.corner-fill-btn:hover {
    color: white;
}
```

### Button 9

```css
/* -- Button CSS -- */

.btn-2 {
    background: #004dff;
    background: linear-gradient(0deg, #004dff 0%, #004dff 100%);
    border: none;
}

.btn-2:before {
    height: 0%;
    width: 2px;
}

.btn-2:hover {
    box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
              -4px -4px 6px 0 rgba(116, 125, 136, .5), 
    inset -4px -4px 6px 0 rgba(255,255,255,.2),
    inset 4px 4px 6px 0 rgba(0, 0, 0, .4);
}
```

### Button 10

```css
/* -- Button CSS -- */

.gbutton {
    width: 9em;
    height: 3em;
    border-radius: 30em;
    font-size: 15px;
    font-family: inherit;
    border: none;
    position: relative;
    overflow: hidden;
    z-index: 1;
    box-shadow: 6px 6px 12px #c5c5c5,
             -6px -6px 12px #ffffff;
}

.gbutton::before {
    content: '';
    width: 0;
    height: 3em;
    border-radius: 30em;
    position: absolute;
    top: 0;
    left: 0;
    background-image: linear-gradient(to right, #0fd850 0%, #f9f047 100%);
    transition: .5s ease;
    display: block;
    z-index: -1;
}

.gbutton:hover::before {
    width: 9em;
}
```

### Button 11

```css
/* -- Button CSS -- */

.corner-sweep-btn {
    position: relative;
    display: inline-block;
    padding: 14px 36px;
    font-size: 16px;
    color: #0071E3;
    background-color: transparent;
    border: 2px solid #0071E3;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: color 0.4s ease;
    z-index: 1;
}

.corner-sweep-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    background-color: #0071E3;
    z-index: -1;
    transition: width 0.3s ease, height 0.3s ease;
    border-bottom-right-radius: 100%;
}

.corner-sweep-btn:hover::before {
    width: 200%;
    height: 500%;
}

.corner-sweep-btn:hover {
    color: white;
}
```

### Button 12

```css
/* -- Button CSS -- */

.slide-up-btn {
    position: relative;
    display: inline-block;
    padding: 14px 36px;
    font-size: 16px;
    color: #0071E3;
    background: transparent;
    border: 2px solid #0071E3;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: color 0.4s ease;
}

.slide-up-btn::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background-color: #0071E3;
    border-radius: 8px;
    transition: height 0.4s ease;
    z-index: -1;
}

.slide-up-btn:hover::before {
    height: 100%;
}

.slide-up-btn:hover {
    color: white;
}
```

### Button 13

```css
/* -- Button CSS -- */

<style>
.wavebutton:body {
}

.wavebutton {
    display: flex;
    justify-content: center;
  /* centers text horizontally */
    align-items: center;
      /* centers text vertically */
    position: relative;
    z-index: 1;
    overflow: hidden;
    text-decoration: none;
    text-align: center;
    font-family: sans-serif;
    font-weight: 600;
    font-size: 2em;
    padding: 0.75em 2em;
    
      /* balanced horizontal padding for nice spacing */
    color: #0071E3;
    border: 0.15em solid #0071E3;
    border-radius: 1.4em;
    cursor: pointer;
    transition: 4s;
    user-select: none;
}

.wavebutton::before,
.wavebutton::after {
    content: '';
    position: absolute;
    top: -1.5em;
    z-index: -1;
    width: 200%;
    aspect-ratio: 1;
    border-radius: 40%;
    background-color: rgba(0, 113, 227, 0.25);
    transition: 4s;
}

.wavebutton::before {
    left: -80%;
    transform: translate3d(0, 5em, 0) rotate(-340deg);
}

.wavebutton::after {
    right: -80%;
    transform: translate3d(0, 5em, 0) rotate(390deg);
}

.wavebutton:hover,
.wavebutton:focus {
    color: white;
}

.wavebutton:hover::before,
.wavebutton:focus::before,
.wavebutton:hover::after,
.wavebutton:focus::after {
    transform: none;
    background-color: rgba(0, 113, 227, 0.75);
}
</style>
```

### Button 14

```css
/* -- Button CSS -- */

.underline-fill-btn {
    position: relative;
    padding: 14px 36px;
    font-size: 16px;
    color: #0071E3;
    background: transparent;
    border: 2px solid #0071E3;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: color 0.3s ease;
    z-index: 1;
}

.underline-fill-btn::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0%;
    background-color: #0071E3;
    z-index: -1;
    transition: height 0.4s ease;
}

.underline-fill-btn:hover::before {
    height: 100%;
}

.underline-fill-btn:hover {
    color: white;
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.allthingsghl.com/funnels/buttons/button-style.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.