感觉这个效果还不错,代码直接复制换类名就行:
<button class="btn">按钮</button>
<style>
.btn {
width: 100px;
height: 40px;
border: solid 1px #ffe395;
background-color: #b69e5c;
font-family: Roboto;
font-size: 18px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
letter-spacing: normal;
color: #ffff85;
cursor: pointer;
position: relative;
box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
display: flex;
align-items: center;
}
.btn:hover {
transition: all 0.3s;
background: #b69e5c;
opacity: 0.8;
}
.btn:active {
opacity: 0.3;
}
.btn:focus {
outline: none;
}
.btn:after {
content: "";
display: block;
position: absolute;
top: -15px;
left: -15px;
right: -15px;
bottom: -15px;
pointer-events: none;
background-color: #b69e5c;
background-repeat: no-repeat;
background-position: 50%;
opacity: 0;
transition: all 0.3s;
}
.btn:active:after {
opacity: 0.8;
top: 0;
left: 0;
right: 0;
bottom: 0;
transition: 0s;
}
</style>
我尝试把这个按钮封成一个小组件,在styled中这么写:
import React from "react";
import styled from "styled-components";
interface btn {
w: number;
h: number;
children?: any;
type: string;
}
export const Btn: React.FC<btn> = ({ w, h, children, type }) => {
return (
<Box w={w} h={h} type={type}>
{children}
</Box>
);
};
const Box = styled.div<{ w: number; h: number; type: any }>`
width: ${(props) => props.w}px;
height: ${(props) => props.h}px;
border-radius: 5px;
background-color: ${(props) => (props.type === "A" ? "#7540ee" : "#f7f7f9")};
color: ${(props) => (props.type === "A" ? "#f7f7f9" : "#7540ee")};
border: 1px solid ${(props) => (props.type === "A" ? "#f7f7f9" : "#7540ee")};
font-family: Arial;
font-size: 14px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
letter-spacing: normal;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
position: relative;
:hover {
transition: all 0.3s;
background: ${(props) => (props.type === "A" ? "#f7f7f9" : "#7540ee")};
color: ${(props) => (props.type === "A" ? "#7540ee" : "#f7f7f9")};
border: 1px solid ${(props) => (props.type === "A" ? "#7540ee" : "#f7f7f9")};
}
:focus {
outline: none;
}
:after {
content: "";
display: block;
position: absolute;
border-radius: 5px;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
pointer-events: none;
background-color: #7540ee;
background-repeat: no-repeat;
background-position: 50%;
opacity: 0;
transition: all 0.3s;
}
:active:after {
opacity: 0.8;
top: 0;
left: 0;
right: 0;
bottom: 0;
transition: 0s;
}
`;
这个按钮需要传值,分别是width和height还有按钮中所要展示的文字或者图片什么的,你也可以在往里边添加一些其他的属性,比如圆角什么的。
其中多了一个type是个状态判断,传递不同的状态展示不同的样式,我只用了两个,一个是大写的A是string类型的第二个可以随便写,只要不是A就是另一种状态。