Add hero buttons
This commit is contained in:
@@ -3,14 +3,21 @@
|
||||
.button {
|
||||
-webkit-appearance: none;
|
||||
border-radius: none;
|
||||
padding: 0.5rem 1rem;
|
||||
padding: 0.8rem 2rem;
|
||||
margin: 0.5rem;
|
||||
border: 2px solid $blue;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
font-size: 10px;
|
||||
background: none;
|
||||
text-transform: uppercase;
|
||||
|
||||
&.hero {
|
||||
background-color: $dark-blue;
|
||||
color: $blue;
|
||||
font-weight: 500;
|
||||
letter-spacing: 1.5px;
|
||||
border: 1px solid $white;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border: 2px solid $dark-blue;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
@@ -3,12 +3,15 @@ import "./Button.scss";
|
||||
|
||||
export interface ButtonProps {
|
||||
onClick: () => void;
|
||||
type: string;
|
||||
}
|
||||
|
||||
export default class Button extends React.Component<ButtonProps, undefined> {
|
||||
render() {
|
||||
const { type } = this.props;
|
||||
const className = `button ${type}`;
|
||||
return (
|
||||
<button onClick={this.props.onClick} className="button">
|
||||
<button onClick={this.props.onClick} className={className}>
|
||||
{this.props.children}
|
||||
</button>
|
||||
);
|
||||
|
||||
@@ -11,6 +11,7 @@ import PageSection from "../../components/PageSection";
|
||||
import { BackgroundColor as PageSectionColor } from "../../components/PageSection/PageSection";
|
||||
import HeroMainSection from "../../components/HeroMainSection";
|
||||
import HeroAsideSection from "../../components/HeroAsideSection";
|
||||
import Button from "../../components/Button";
|
||||
|
||||
interface FrontPageProps {
|
||||
staticContext: StaticContext;
|
||||
@@ -71,6 +72,8 @@ class FrontPage extends React.Component<FrontPageProps, FrontPageState> {
|
||||
Kilta kasaa yhteen yli 600 alansa huippua, jotka ovat
|
||||
avainasemassa vauhdilla sähköistyvän maailmamme
|
||||
kehityksessä.</p>
|
||||
<Button type="hero" onClick={() => { }}>Killan tehtävät ›</Button>
|
||||
<Button type="hero" onClick={() => { }}>Vastapainoa opiskelulle ›</Button>
|
||||
</HeroMainSection>
|
||||
<HeroAsideSection>
|
||||
Kikkeli
|
||||
|
||||
Reference in New Issue
Block a user