Up to 70% off on hosting for WordPress Websites $2.95 /mo

Csshint recommends hosting

bootstrap • css • html

18 CSS Blockquotes

5 years ago

CSS Quote style

Written by admin

Take a look at some of our favorite Collection of hand-picked HTML and CSS blockquote code examples : animated , hover effects, typography styles, etc.

Quotes-design

1.Quotes animation

<br /> See the Pen <a href='https://codepen.io/_Sabine/pen/EryxNr/'>Quotes animation</a> by Sabine Robart<br /> (<a href='https://codepen.io/_Sabine'>@_Sabine</a>) on <a href='https://codepen.io'>CodePen</a>.<br />

Author

Sabine Robart

Made with

HTML / CSS(SCSS)

demo and code Get Hosting

2.Quote: Steven Pressfield

<br /> See the Pen <a href='https://codepen.io/jupago/pen/dwZKbM/'>Quote: Steven Pressfield • Start before you are ready</a> by Juan Pablo<br /> (<a href='https://codepen.io/jupago'>@jupago</a>) on <a href='https://codepen.io'>CodePen</a>.<br />

Author

Juan Pablo

Made with

HTML / CSS

demo and code Get Hosting

3.Coffee Quote

<br /> See the Pen <a href='https://codepen.io/JacobLett/pen/jZYENy/'>Coffee Quote – blockquote, flexbox, rgba, before content</a> by Jacob Lett<br /> (<a href='https://codepen.io/JacobLett'>@JacobLett</a>) on <a href='https://codepen.io'>CodePen</a>.<br />

Author

Jacob Lett

Made with

HTML / CSS

demo and code Get Hosting

4.Quotes with Font Awesome

<br /> See the Pen <a href='https://codepen.io/jimmycow/pen/LmjVaz/'>Quotes with Font Awesome and pseudo elements</a> by Jaime<br /> (<a href='https://codepen.io/jimmycow'>@jimmycow</a>) on <a href='https://codepen.io'>CodePen</a>.<br />

Author

Jaime

Made with

HTML / CSS

demo and code Get Hosting

5.Blockquote Styles

<br /> See the Pen <a href='https://codepen.io/chris22smith/pen/oQWavL/'>Blockquote Styles</a> by Chris Smith<br /> (<a href='https://codepen.io/chris22smith'>@chris22smith</a>) on <a href='https://codepen.io'>CodePen</a>.<br />

Author

Chris Smith

Made with

HTML / CSS(SCSS)

demo and code Get Hosting

6.Quote: Jared Spool

<br /> See the Pen <a href='https://codepen.io/jupago/pen/GPxqLX/'>Quote: Jared Spool • Web Site Usability: A Designer’s Guide</a> by Juan Pablo<br /> (<a href='https://codepen.io/jupago'>@jupago</a>) on <a href='https://codepen.io'>CodePen</a>.<br />

Author

Juan Pablo

Made with

HTML / CSS

demo and code Get Hosting

7.CSS Quote Box Hover Effects

Author

abdel Rhman

Made with

HTML(Pug) / CSS(SCSS)

demo and code Get Hosting

8.Author Quote

<br /> See the Pen <a href='https://codepen.io/khadkamhn/pen/eNKKwN/'>Day 007 Author Quote</a> by Mohan Khadka<br /> (<a href='https://codepen.io/khadkamhn'>@khadkamhn</a>) on <a href='https://codepen.io'>CodePen</a>.<br />

Author

Mohan Khadka

Made with

HTML / CSS

demo and code Get Hosting

9.Quotes

<br /> See the Pen <a href='https://codepen.io/Iulius90/pen/VYyNBY/'>Quotes</a> by Iulian Savin<br /> (<a href='https://codepen.io/Iulius90'>@Iulius90</a>) on <a href='https://codepen.io'>CodePen</a>.<br />

Author

Iulian Savin

Made with

HTML / CSS

demo and code Get Hosting

10.quote card

<br /> See the Pen <a href='https://codepen.io/governorfancypants/pen/elsDc/'>Shiienurm quote card</a> by Tobias Johansson<br /> (<a href='https://codepen.io/governorfancypants'>@governorfancypants</a>) on <a href='https://codepen.io'>CodePen</a>.<br />

Author

Tobias Johansson

Made with

HTML / CSS(SCSS) / JS

demo and code Get Hosting

11.quote Test

<br /> See the Pen <a href='https://codepen.io/chepe/pen/VLZoMK/'>Quote Test</a> by Jose Manuel Gulias Lugo<br /> (<a href='https://codepen.io/chepe'>@chepe</a>) on <a href='https://codepen.io'>CodePen</a>.<br />

Author

Jose Manuel Gulias Lugo

Made with

HTML / CSS

demo and code Get Hosting

12.Pure CSS Blockquote

<br /> See the Pen <a href='https://codepen.io/SkyHyzer/pen/gRvEGq/'>Pure CSS Blockquote</a> by John Fink<br /> (<a href='https://codepen.io/SkyHyzer'>@SkyHyzer</a>) on <a href='https://codepen.io'>CodePen</a>.<br />

Author

John Fink

Made with

HTML (Pug) / CSS(Sass)

demo and code Get Hosting

13.BlockQuote css

Author

Csshint

Made with

HTML / CSS

demo and code Get Hosting

14.Clean and simple blockquote style

<br /> See the Pen <a href='https://codepen.io/cliftwalker/pen/XJaEXY/'>Clean and simple blockquote style</a> by Jonathan Clift<br /> (<a href='https://codepen.io/cliftwalker'>@cliftwalker</a>) on <a href='https://codepen.io'>CodePen</a>.<br />

Author

Jonathan Clift

Made with

HTML / CSS

demo and code Get Hosting

15.blockquote stylé

<br /> See the Pen <a href='https://codepen.io/kami441/pen/xardn/'>blockquote stylée littéraire</a> by Vero<br /> (<a href='https://codepen.io/kami441'>@kami441</a>) on <a href='https://codepen.io'>CodePen</a>.<br />

Author

Vero

Made with

HTML / CSS

demo and code Get Hosting

16.Quote cards

<br /> See the Pen <a href='https://codepen.io/_Sabine/pen/daNzdP/'>Quote cards</a> by Sabine Robart<br /> (<a href='https://codepen.io/_Sabine'>@_Sabine</a>) on <a href='https://codepen.io'>CodePen</a>.<br />

Author

Sabine Robart

Made with

HTML / CSS(Scss)

demo and code Get Hosting

17.Modern Block Quote Styles

Author

Mary Lou

Made with

HTML / CSS

demo and code Get Hosting

18.Quote styling

<br /> See the Pen <a href='https://codepen.io/JoeHastings/pen/MOdRVm/'>Quote styling</a> by Joe Hastings<br /> (<a href='https://codepen.io/JoeHastings'>@JoeHastings</a>) on <a href='https://codepen.io'>CodePen</a>.<br />

Author

Joe Hastings

Made with

HTML / CSS(Less)

demo and code Get Hosting