diff options
| -rw-r--r-- | src/components/Guestbook.jsx | 4 | ||||
| -rw-r--r-- | src/components/GuestbookForm.jsx | 2 | ||||
| -rw-r--r-- | src/layouts/Default.astro | 6 |
3 files changed, 6 insertions, 6 deletions
diff --git a/src/components/Guestbook.jsx b/src/components/Guestbook.jsx index 5935d04..f839848 100644 --- a/src/components/Guestbook.jsx +++ b/src/components/Guestbook.jsx @@ -73,8 +73,8 @@ class Guestbook extends Component { ))} </div> )} - {page > 1 && <button class="margin" onClick={this.handlePrevious}>Previous</button>} - {page < totalPages && <button class="margin" onClick={this.handleNext}>Next</button>} + {page > 1 && <button class="button margin" onClick={this.handlePrevious}>Previous</button>} + {page < totalPages && <button class="button margin" onClick={this.handleNext}>Next</button>} </div> ); } diff --git a/src/components/GuestbookForm.jsx b/src/components/GuestbookForm.jsx index 48e043b..8573b5c 100644 --- a/src/components/GuestbookForm.jsx +++ b/src/components/GuestbookForm.jsx @@ -71,7 +71,7 @@ class GuestbookForm extends Component { <label htmlFor="message">Message * (Supports <a href="https://www.markdownguide.org/cheat-sheet/" target="_blank">Markdown</a>)</label> <textarea name="message" placeholder="Enter your message here." required value={this.state.message} onChange={this.handleChange} disabled={this.state.isMessageSent}></textarea> - <button type="submit" disabled={this.state.isMessageSent}>Send</button> + <button class="button" type="submit" disabled={this.state.isMessageSent}>Send</button> </form> {this.state.errorMessage && <p dangerouslySetInnerHTML={{__html: this.state.errorMessage}}/>} {this.state.isMessageSent && !this.state.errorMessage && <p>Sent successfully!</p>} diff --git a/src/layouts/Default.astro b/src/layouts/Default.astro index 2181562..15d3c78 100644 --- a/src/layouts/Default.astro +++ b/src/layouts/Default.astro @@ -100,7 +100,7 @@ const date = new Date(); color: #609460; } - button { + .button { padding: 10px 20px 10px 20px; border-radius: 5px; border: none; @@ -110,12 +110,12 @@ const date = new Date(); transition: ease-in-out 0.2s; } - button:hover { + .button:hover { background-color: #486e48; transition: ease-in-out 0.2s; } - button:active { + .button:active { background-color: #243824; } |