Los 24 Mejores Botones CSS de Uso Gratuito (Con Ejemplos de CodePen) - HackerNoon

15/6/23, 21:08 Los 24 mejores botones CSS de uso gratuito (con ejemplos de CodePen) | HackerNoon
5,
9
L 1
2
o
le
ct
ur
s a
s
2
4
m
e
j
o
r
e
s
https://hackernoon.com/es/los-24-mejores-css-free-to-use-buttons-with-codepen-examples 1/43
b
o
t
o
n
e
s
C
S
S
d
e
u
s
o
g
r
a
t
u
i
t
o
(
c
o
n
e
j
e
m
p
l
o
s
d
e
C
o
d
e
P
e
n
)
202
2/0
9/2
6
por
@fr
ont
end
in
5,
91
2
le
ct
VI ES HI ZH FR PT JA
ur
as
E
s
t
e
a
u
d
i
o
e
s
p
r
o
d
u
c
i
Discover Anything Start Writing Log in
d
o Free Webinar! Clean Code Practices
e
Los
n 24 mejores botones CSS de uso gratuito (con ejemplos de CodePen) po
e
l
i
d
i
o
m
a
o
r
i
g
i
n
a
l
d
e
l
a
h
i
s
t
o
r
i
a
Read
!
by
1 Dr.
x One
(en-
Audio US)
Presen
tado
por
Es difícil hacer o encontrar el botón correcto. He seleccionado 24 de mis favoritos y más

útiles, para que puedas usarlos libremente.
Botón en efecto de diapositiva flotante.
@frontendi
n
gagan
Frontendin is a
design and
development
blog.
Credibilit EDIT ON
HTML CSS Result
y
BUTTON: SLIDE DOWN
BUTTON: SLIDE RIGHT
BUTTON: SLIDE INSIDE
BUTTON: SLIDE DIAGONAL
Efectos de animación de botones creativos |

Solo usando HTML y CSS
EDIT ON
HTML CSS Result
Hover Here!
Botón creativo | pasar el cursor sobre
EDIT ON
HTML CSS JS Result
letter-spacing: 2px;
position: relative;
display: inline-block;
}
span {
position: relative;
/* z-index coz when we put bg to before and after this span
text will not be visible */
z-index: 3;
}
/* Button 1 styles */
.btn-1 a::before {
content: "";
position: absolute;
top: 5px;
left: -2px;
width: calc(100% + 6px);
/*100% plus double the times left values*/
height: calc(100% - 10px);
background-color: #ffffff;
transition: all 0.5s ease-in-out;
transform: scaleY(1);
}
Efecto de desplazamiento del botón de la

interfaz de usuario n.º 2
Pug SCSS Result
HOVER ME
Efectos de desplazamiento de botones

juguetones
EDIT ON
HTML SCSS JS Result
document.querySelectorAll('.button').forEach(button => {
let div = document.createElement('div'),

letters = button.textContent.trim().split('');
function elements(letter, index, array) {
let element = document.createElement('span'),

part = (index >= array.length / 2) ? -1 : 1,
position = (index >= array.length / 2) ? array.length / 2 - index + (array.length
/ 2 - 1) : index,
move = position / (array.length / 2),
rotate = 1 - move;
element.innerHTML = !letter.trim() ? ' ' : letter;

element.style.setProperty('--move', move);
element.style.setProperty('--rotate', rotate);
element.style.setProperty('--part', part);
div.appendChild(element);
Resources
Efecto de desplazamiento de botón
EDIT ON
HTML CSS Result
Home
Products
Services
Contact
Resources 1× 0.5× 0.25× Rerun
Efecto de desplazamiento usando pseudo

elementos
EDIT ON
Pug SCSS Result
HOVER ME
¿Necesita un efecto de desplazamiento de

botón simple para su proyecto? Aquí está mi
lista de ejemplos.
EDIT ON
Pug SCSS JS Result
const shadowFloat = new CreateButtons( shadow float );
const scaleIncrease = new CreateButtons('scale-increase');
const scaleDecrease = new CreateButtons('scale-decrease');
const floatDown = new CreateButtons('float-down');
const floatUp = new CreateButtons('float-up');
const floatLeft = new CreateButtons('float-left');
const floatRight = new CreateButtons('float-right');
const buttonRotate = new CreateButtons('button-rotate');
const buttonRotateGrow = new CreateButtons('button-rotate-grow');
const buttonRotateShrink = new CreateButtons('button-rotate-shrink');
const skewH = new CreateButtons('skew-horizontal');
const skewV = new CreateButtons('skew-vertical');
const flipH = new CreateButtons('flip-horizontal', true);
const flipV = new CreateButtons('flip-vertical', true);
const increaseLetterSpace = new CreateButtons('increase-letter-space', true);
const swipeOverlay = new CreateButtons('swipe-overlay', true);
const swipeOverlayOut = new CreateButtons('swipe-overlay-out', true);
const iconSlideLeft = new CreateButtons('icon-slide-left', true);
const iconSlideRight = new CreateButtons('icon-slide-right', true);
const buttonsArray = [
iconSlideLeft,
iconSlideRight,
swipeOverlayOut,
swipeOverlay
Resources
Botón Hover Draw - Solo CSS
EDIT ON
HTML SCSS Result
Hover me
Una colección genial de efectos de

desplazamiento de botones fáciles que usan
solo CSS. Profesional y limpio. No olvide
dejar algunos comentarios, preguntas o
inquietudes. Te gustaria ver mas? o tienes
algunas ideas? ¡Hágamelo saber!
EDIT ON
HTML CSS Result
.btn, .btn2, .btn3, .btn4, .btn5, .btn6, .btn7, .btn10{

padding: 15px 100px;
margin:10px 4px;
color: #fff;
font-family: sans-serif;
text-transform: uppercase;
text-align: center;
position: relative;
text-decoration: none;
display:inline-block;
.btn::before {
content: '';
position: absolute;
bottom: 50%;
left: 0px;
width: 100%;
height: 1px;
background: #6098FF;
display: block;
-webkit-transform-origin: left top;
-ms-transform-origin: left top;
transform origin: left top;
Impresionantes efectos de desplazamiento de

botón
EDIT ON
HTML CSS Result
}
.btnfos-2:hover:before {
bottom: auto;
top: 0;
width: 70%;
}
.btnfos-3 {
background: #3498db;
border: 1px solid white;
box-shadow: 0px 2px 0 white, 2px 4px 6px #eee;
font-weight: 900;
letter-spacing: 1px;
-webkit-transition: all 150ms linear;
transition: all 150ms linear;
}
.btnfos-3:hover {
background: #3498db;
border: 1px solid rgba(0, 0, 0, 0.05);
box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2);
color: #74e6e0;
text-decoration: none;
text shadow: 1px 1px 0 #136a65;
Resources
Botón con una sutil toallita de brillo/brillo

al pasar el mouse.
Sin imágenes, solo un único elemento HTML y un pseudo-elemento CSS.
EDIT ON
HTML SCSS Result
OOH, SHINY!
Estos son diez botones con efectos de

desplazamiento CSS. Los efectos son
transiciones, sombras de texto, animaciones y
transformaciones.
EDIT ON
HTML CSS Result
TEN HOVER
EFFECTS
HOVER ONE HOVER TWO HOVER THREE
HOVER FOUR HOVER FIVE HOVER SIX
¡Botón con efecto simple al pasar el mouse!

Se requiere un solo elemento
EDIT ON
HTML CSS Result
Hover me !
Jugando con animaciones css y efecto de

desplazamiento.
EDIT ON
HTML SCSS Result
Hover Me
Una colección de efectos de desplazamiento

con tecnología CSS3 para aplicar a enlaces,
botones, logotipos, SVG, imágenes destacadas,
etc. Aplíquelo fácilmente a sus propios
elementos, modifique o simplemente utilícelo
como inspiración. Disponible en CSS, SASS y
LESS.
EDIT ON
HTML SCSS Result
Hover.css
Version 2 now available →
Includes over 100 effects and SASS/LESS support
2D Transforms
Grow Shrink Pulse Pulse Grow Pulse Shrink Push
Pop Rotate Grow Rotate Float Sink Hover Hang
¡Estilos de botones simples para poner en marcha tu diseño web!
EDIT ON
HTML SCSS JS Result
const body = document.querySelector('body')

const twitter = document.querySelector('.twitter')
twitter.addEventListener("mouseover", function () {
body.classList.add('linked')
},false)
twitter.addEventListener("mouseout", function () {
body.classList.remove('linked')
}, false)
Resources
Haciendo algunas animaciones básicas con box-

shadows. No se requieren elementos
adicionales o incluso pseudoelementos.
EDIT ON
HTML SCSS Result
Simple hover effects with box-shadow
Fill In Pulse Close Raise Fill Up
Slide Offset
Algunos efectos de desplazamiento de botones

que utilizan elementos psuedo y bordes.
EDIT ON
HTML SCSS JS Result
$(function() {
$('.btn-6')
.on('mouseenter', function(e) {
var parentOffset = $(this).offset(),
relX = e.pageX - parentOffset.left,
relY = e.pageY - parentOffset.top;
$(this).find('span').css({top:relY, left:relX})
})
.on('mouseout', function(e) {
var parentOffset = $(this).offset(),
relX = e.pageX - parentOffset.left,
relY = e.pageY - parentOffset.top;
$(this).find('span').css({top:relY, left:relX})
});
});
Resources
Algunos ejemplos de llamativos efectos de

desplazamiento. Actualmente actualizando este
bolígrafo. Trabajo en progreso
EDIT ON
HTML SCSS Result
Button Hover Effects
HOVER HOVER HOVER HOVER HOVER
Follow on Twitter
Una idea simple que terminó siendo muy

difícil de llevar a cabo. No se utilizan
elementos 3D ni transformaciones en este
experimento, solo elementos 2D y algunas
matemáticas inteligentes para dar la ilusión
de una moneda 3D con un grosor real. Estoy
contento con los resultados dadas las
limitaciones de HTML y CSS.
EDIT ON
HTML SCSS JS Result
const tipButtons = document.querySelectorAll('.tip-button')
// Loop through all buttons (allows for multiple buttons on page)

tipButtons.forEach((button) => {
let coin = button.querySelector('.coin')
// The larger the number, the slower the animation

coin.maxMoveLoopCount = 90
button.addEventListener('click', () => {
if (button.clicked) return
button.classList.add('clicked')
// Wait to start flipping the coin because of the button tilt animation
setTimeout(() => {
// Randomize the flipping speeds just for fun
coin.sideRotationCount = Math.floor(Math.random() * 5) * 90
coin.maxFlipAngle = (Math.floor(Math.random() * 4) + 3) * Math.PI
button.clicked = true
flipCoin()
}, 50)
})
Resources
Botón de pago
EDIT ON
HTML SCSS JS Result
const { to, set, from, fromTo, registerPlugin } = gsap
registerPlugin(MotionPathPlugin);
document.querySelectorAll('.pay-button').forEach(button => {
button.addEventListener('pointerdown', e => {
if(button.classList.contains('animating')) {
return
}
to(button, {
'--scale': .975,
duration: .15
})
})
button.addEventListener('pointerup', e => {
if(button.classList.contains('animating')) {
return
}
to(button, {
'--scale': 1,
duration: .15
})
})
Resources
Confetti usando JS, SCSS y un lienzo HTML5.
EDIT ON
HTML SCSS JS Result
// ammount to add on each button press

const confettiCount = 20
const sequinCount = 10
// "physics" variables
const gravityConfetti = 0.3
const gravitySequins = 0.55
const dragConfetti = 0.075
const dragSequins = 0.02
const terminalVelocity = 3
// init other global elements

const button = document.getElementById('button')
var disabled = false
const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
canvas.width = window.innerWidth
canvas.height = window.innerHeight
let cx = ctx.canvas.width / 2
let cy = ctx.canvas.height / 2
// add Confetto/Sequin objects to arrays to draw them

let confetti = []
Resources
Camiseta botón cañón con GreenSock.
EDIT ON
Pug Stylus Babel Result
const {
Splitting,
gsap: { timeline, set },
} = window
const CLIP = new Audio(

'https://s3-us-west-2.amazonaws.com/s.cdpn.io/605876/t-shirt-cannon-pop.mp3'
)
// Split the order letter
Splitting()
const SHIRT_SEGMENTS = [...document.querySelectorAll('.t-shirt')]

const SHIRT = document.querySelector('.t-shirt__wrapper')
const LEFT_ARM = SHIRT_SEGMENTS[1]
const RIGHT_ARM = SHIRT_SEGMENTS[2]
const FOLD = SHIRT_SEGMENTS[3].querySelector('.t-shirt__fold')
const CLIPS = [...document.querySelectorAll('clipPath rect')]
const BUTTON = document.querySelector('button')
document.documentElement.style.setProperty('--hue', Math.random() * 360)
set(FOLD, { transformOrigin: '50% 100%', scaleY: 0 })

set(CLIPS, { transformOrigin: '50% 0' })
Resources View Compiled
Para botones CSS y más, consulte FrontEndin
by gagan @frontendin.
Frontendin is a design and development blog.
Read my stories
LEARN HOW TO CONTINUOUSLY IMPROVE

YOUR CODEBASE
H
I
S
T
O
R
I
A
S
R
E
L
A
C
I
O
N
A
D
A
S
¿
E
s
t
á
V
a
m
p
i
r
e
:
T
h
e
M
a
s
q
u
e
r
a
d
e
-
B
l
o
o
d
l
i
n
e
s
2
r
e
s
u
r
g
i
e
n
d
o
d
e
s
u
a
t
a
ú
d
?
Pu
bl
is
he
d
at
Ju
n
13
,
20
23
by
lo
ne
wo
lf
47
19
#
g
a
m
i
n
g
C
ó
m
p
u
t
o
f
a
c
i
a
l
:
u
n
a
b
r
e
v
e
h
i
s
t
o
r
i
a
y
e
l
f
u
t
u
r
o
p
r
o
m
e
t
e
d
o
r
d
e
P
e
r
s
o
n
a
l
X
R
Pu
bl
is
he
d
at
Ju
n
15
,
20
23
by
ah
rw
hi
tf
or
d
#
a
i
O
p
t
i
m
i
z
a
c
i
ó
n
d
e
C
o
r
e
W
e
b
V
i
t
a
l
s
:
u
n
a
g
u
í
a
p
a
s
o
a
p
a
s
o
Pu
bl
is
he
d
at
Ju
n
14
,
20
23
by
lo
ad
o
#
w
e
b
-
d
e
v
e
l
o
p
m
e
n
t
U
p
l
a
n
d
y
N
o
w
h
e
r
e
r
o
m
p
e
n
f
r
o
n
t
e
r
a
s
:
'
C
a
f
é
s
'
e
s
l
a
n
u
e
v
a
e
r
a
e
n
e
l
c
o
m
p
r
o
m
i
s
o
d
i
g
i
t
a
l
Pu
bl
is
he
d
at
Ju
n
15
,
20
23
by
Is
ha
nO
nT
ec LOADING
h
#
. . . comments & more!
w
e
b
3
The HackerNoon Newsletter
Quality Reads About Technology Infiltrating Everything
name@company.com Subscribe [Free]
Yes, I agree to receive electric content at Noon by HackerNoon
about read
Careers Archive
Contact Categories
Cookies Image Gallery

Emails Leaderboard
Help Learn Repo
Privacy Noonification
Shareholders Signup
Startups 2023 Tech Beat
Terms Tech Brief
Testimonials Tech Tags
Updates Top Stories
write partner
Distribution Billboard
Editor Tips Business Post
Guidelines Case Studies
Help Company Directory
New Story Crypto Directory
Perks Good Companies
Process Newsletters
Prompts Niche Targetting
Subscribers Partnerships
Testimonials Startup Package
Why Write Writing Contests
Hackernoon hq - po box 2206, edwards, colorado 81632, usa

Los 24 Mejores Botones CSS de Uso Gratuito (Con Ejemplos de CodePen) - HackerNoon

Cargado por

Copyright:

Formatos disponibles

Los 24 Mejores Botones CSS de Uso Gratuito (Con Ejemplos de CodePen) - HackerNoon

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Los 24 Mejores Botones CSS de Uso Gratuito (Con Ejemplos de CodePen) - HackerNoon

Cargado por

Copyright:

Formatos disponibles

15/6/23, 21:08 Los 24 mejores botones CSS de uso gratuito (con ejemplos de CodePen) | HackerNoon

Es difícil hacer o encontrar el botón correcto. He seleccionado 24 de mis favoritos y más

Botón en efecto de diapositiva flotante.

BUTTON: SLIDE RIGHT

BUTTON: SLIDE INSIDE

BUTTON: SLIDE DIAGONAL

Efectos de animación de botones creativos |

Botón creativo | pasar el cursor sobre

Efecto de desplazamiento del botón de la

Pug SCSS Result

Efectos de desplazamiento de botones

let div = document.createElement('div'),

function elements(letter, index, array) {

let element = document.createElement('span'),

element.innerHTML = !letter.trim() ? '&nbsp;' : letter;

Efecto de desplazamiento de botón

Resources 1× 0.5× 0.25× Rerun

Efecto de desplazamiento usando pseudo

Resources 1× 0.5× 0.25× Rerun

¿Necesita un efecto de desplazamiento de

Botón Hover Draw - Solo CSS

Una colección genial de efectos de

.btn, .btn2, .btn3, .btn4, .btn5, .btn6, .btn7, .btn10{

Impresionantes efectos de desplazamiento de

Botón con una sutil toallita de brillo/brillo

Sin imágenes, solo un único elemento HTML y un pseudo-elemento CSS.

Estos son diez botones con efectos de

HOVER ONE HOVER TWO HOVER THREE

HOVER FOUR HOVER FIVE HOVER SIX

Resources 1× 0.5× 0.25× Rerun

¡Botón con efecto simple al pasar el mouse!

Resources 1× 0.5× 0.25× Rerun

Jugando con animaciones css y efecto de

Resources 1× 0.5× 0.25× Rerun

Una colección de efectos de desplazamiento

Grow Shrink Pulse Pulse Grow Pulse Shrink Push

Pop Rotate Grow Rotate Float Sink Hover Hang

Resources 1× 0.5× 0.25× Rerun

¡Estilos de botones simples para poner en marcha tu diseño web!

const body = document.querySelector('body')

Haciendo algunas animaciones básicas con box-

Simple hover effects with box-shadow

Fill In Pulse Close Raise Fill Up

Resources 1× 0.5× 0.25× Rerun

Algunos efectos de desplazamiento de botones

Algunos ejemplos de llamativos efectos de

Button Hover Effects

HOVER HOVER HOVER HOVER HOVER

Resources 1× 0.5× 0.25× Rerun

Una idea simple que terminó siendo muy

const tipButtons = document.querySelectorAll('.tip-button')

// Loop through all buttons (allows for multiple buttons on page)

// The larger the number, the slower the animation

const { to, set, from, fromTo, registerPlugin } = gsap

Confetti usando JS, SCSS y un lienzo HTML5.

// ammount to add on each button press

// init other global elements

// add Confetto/Sequin objects to arrays to draw them

Camiseta botón cañón con GreenSock.

element.innerHTML = !letter.trim() ? ' ' : letter;